Skip to content

Commit

Permalink
[#111] Replace Bootstrap dropdown with slideout panel
Browse files Browse the repository at this point in the history
  • Loading branch information
cyChop committed Dec 11, 2016
1 parent e5bfcc7 commit 3d65295
Show file tree
Hide file tree
Showing 12 changed files with 172 additions and 73 deletions.
2 changes: 1 addition & 1 deletion dev/css/demo.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ body {
}

.footer {
position: absolute;
position: fixed;
bottom: 0;
width: 100%;
height: 35px;
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"karma-jasmine-jquery": "0.1.1",
"karma-verbose-reporter": "0.0.3",
"karma-webpack": "1.8.0",
"node-sass": "3.13.0",
"node-sass": "^3.4.2",
"postcss-loader": "1.2.0",
"raw-loader": "0.5.1",
"sass-loader": "4.0.2",
Expand Down
2 changes: 1 addition & 1 deletion src/i18n/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"orders": {
"none": "Personne n'a encore choisi.",
"random": "Laisser le hasard décider",
"clear": "Vider les commandes"
"clear": "Effacer les commandes"
},
"units": {
"fahrenheit": "°F",
Expand Down
67 changes: 35 additions & 32 deletions src/js/template/beverages.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,34 @@
<div rv-class-up="ready | or error" class="bubble info slide">
<i class="icon icon-loading spin"></i> {i18n.loading}
</div>
<div class="orders-backdrop click-toggle-orders" rv-class-visible="orders._visible"></div>
<div class="orders-summary" rv-class-visible="orders._visible">
<div class="close">
<span class="click-toggle-orders">&times;</span>
</div>
<ul>
<li rv-if="orders:total | eq 0">{i18n.orders.none}</li>
<li rv-each-o="orders:orders">
<span class="quantity" rv-addclass="o:beverage:basis">{o:quantity}</span>
{o:beverage:name}
<small rv-if="o:beverage:brand">({o:beverage:brand})</small>
<br/>
<span class="prep-info" rv-class-invisible="o:beverage:preparation.time | showMinMax | not">
<i class="icon icon-time"></i>
<span rv-html="o:beverage:preparation.time | minMax ' - '"></span><span
rv-html="i18n.units.minutes"></span>
</span>
<span class="prep-info" rv-class-invisible="o:beverage:preparation.temp | showMinMax | not">
<i class="icon icon-temp"></i>
<span rv-text="o:beverage:preparation.temp | minMax ' - '"></span><span
rv-html="temperatureUnit | map i18n.units"></span>
</span>
</li>
<li rv-unless="orders:total | eq 0" class="click-clear-orders">
<strong>&times;</strong> {i18n.orders.clear}
</li>
</ul>
</div>
<div rv-class-up="ready | not | or error" class="slide">
<div class="header">
<div class="cart-controls">
Expand All @@ -14,36 +42,10 @@
rv-disabled="beverages._shown | eq 0">
<i class="icon icon-random"></i>
</button>
<div class="dropdown">
<button class="dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="icon icon-cart"></i>
<span class="tag tag-pill tag-primary">{orders:total}</span>
</button>
<div class="dropdown-menu dropdown-menu-right cart">
<h6 rv-if="orders:total | eq 0" class="dropdown-header">{i18n.orders.none}</h6>
<a rv-each-o="orders:orders" class="dropdown-item clearfix">
<span class="tag tag-pill" rv-addclass="o:beverage:basis">{o:quantity}</span>
{o:beverage:name}
<small rv-if="o:beverage:brand">({o:beverage:brand})</small>
<br/>
<span class="min-max" rv-class-invisible="o:beverage:preparation.time | showMinMax | not">
<i class="icon icon-time"></i>
<span rv-html="o:beverage:preparation.time | minMax ' - '"></span><span
rv-html="i18n.units.minutes"></span>
</span>
<span class="min-max" rv-class-invisible="o:beverage:preparation.temp | showMinMax | not">
<i class="icon icon-temp"></i>
<span rv-text="o:beverage:preparation.temp | minMax ' - '"></span><span
rv-html="temperatureUnit | map i18n.units"></span>
</span>
</a>
<div rv-unless="orders:total | eq 0" class="dropdown-divider"></div>
<a rv-unless="orders:total | eq 0" class="dropdown-item click-clear-order" href="#">
<strong>&times;</strong> {i18n.orders.clear}
</a>
</div>
</div>
<button class="click-toggle-orders" aria-haspopup="true" aria-expanded="false">
<i class="icon icon-cart"></i>
<span>{orders:total}</span>
</button>
</div>
<div class="filters">
<div class="btn-group">
Expand All @@ -64,7 +66,8 @@ <h6 rv-if="orders:total | eq 0" class="dropdown-header">{i18n.orders.none}</h6>
</label>
</div>
</div>
<input type="text" id="field-text-search" rv-placeholder="i18n.free-text-filter" rv-value="filters:text"/>
<input type="text" id="field-text-search" rv-placeholder="i18n.free-text-filter"
rv-value="filters:text"/>
</div>
</div>
<div class="slide bubble info" role="alert" rv-class-up="beverages._shown | eq 0 | not">
Expand Down Expand Up @@ -140,7 +143,7 @@ <h6 rv-if="orders:total | eq 0" class="dropdown-header">{i18n.orders.none}</h6>
</div>
<div class="col-xs-12 col-md-2 actions">
<div class="btn-group" role="group">
<button class="click-expand" rv-data-tooltip="i18n.beverage.expand">
<button class="click-toggle-detail " rv-data-tooltip="i18n.beverage.expand">
<i class="icon icon-detail"></i>
</button>
<button class="click-order" rv-data-tooltip="i18n.beverage.order">
Expand Down
12 changes: 7 additions & 5 deletions src/js/view/beverages.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import Orders from '../model/order/order-summary';
import i18n from 'i18n';

const template = require('../template/beverages.html');
require('bootstrap/js/dropdown');
require('../../scss/beverages.scss');


Expand Down Expand Up @@ -76,15 +75,14 @@ export default View.extend(
*/
context: null,

rview: null,

events: {
'change .filters :checkbox': '_filterBeverages',
'keyup .filters :text': '_filterBeverages',
'click .beverage .click-expand': '_toggleDetail',
'click .beverage .click-toggle-detail ': '_toggleDetail',
'click .beverage .click-order': '_pick',
'click .click-random-order': '_pickRandom',
'click .click-clear-order': '_clearOrder'
'click .click-toggle-orders': '_toggleOrders',
'click .click-clear-orders': '_clearOrder'
},

/**
Expand Down Expand Up @@ -196,6 +194,10 @@ export default View.extend(
this.orders.order(visible[_.random(0, visible.length - 1)]);
},

_toggleOrders () {
this.orders._visible = !this.orders._visible;
},

_clearOrder () {
this.orders.clear();
},
Expand Down
6 changes: 3 additions & 3 deletions src/scss/_bootstrap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
//@import "node_modules/bootstrap/scss/buttons";

// Components
@import "node_modules/bootstrap/scss/animation";
@import "node_modules/bootstrap/scss/dropdown";
//@import "node_modules/bootstrap/scss/animation";
//@import "node_modules/bootstrap/scss/dropdown";
//@import "node_modules/bootstrap/scss/button-group";
//@import "node_modules/bootstrap/scss/input-group";
//@import "node_modules/bootstrap/scss/custom-forms";
Expand All @@ -35,7 +35,7 @@
//@import "node_modules/bootstrap/scss/card";
//@import "node_modules/bootstrap/scss/breadcrumb";
//@import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/tags";
//@import "node_modules/bootstrap/scss/tags";
//@import "node_modules/bootstrap/scss/jumbotron";
//@import "node_modules/bootstrap/scss/alert";
//@import "node_modules/bootstrap/scss/progress";
Expand Down
30 changes: 22 additions & 8 deletions src/scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@ $bev-icon-back-color: #666;
//
// General styles
//
$base-white: #fff;
$base-red: #f55;
$base-green: #3b7;
$base-blue: #7bd;
$base-white: #ffffff;
$base-black: #000000;
$base-red: #ff5555;
$base-green: #33bb77;
$base-blue: #77bbdd;

$border-color: shade($base-white, 20%);

$base-padding: 7px;
$main-padding: 0;
$header-padding: $base-padding $base-padding 0;

// Button styling
$button-border-color: $border-color;
$button-bg-color: shade($base-white, 5%);
Expand All @@ -21,22 +26,31 @@ $button-margin-x: 5px;
$button-font-size: 16px;
$button-line-height: 1.6;

// Input styling
$input-margin-x: $button-margin-x;

// Tooltip styling
$tooltip-color:shade($base-white, 80%);
$tooltip-color: shade($base-white, 80%);
$tooltip-opacity: .85;
$tooltip-font-size: 14px;
$tooltip-line-height: 1.2;
$tooltip-width: 160px;

// Input styling
$input-margin-x: $button-margin-x;

// Bubbles styling
$bubble-variants: (
info: $base-blue,
error: $base-red
);

// Orders summary styling
$orders-border-color: $border-color;
$orders-bg-color: $base-white;
$orders-backdrop-color: transparentize($base-black, .6);
$order-padding: 5px 15px;
$orders-width: 50%;
$orders-width-mobile: 100%;
$orders-z-index: 50;

//
// Beverages elements
//
Expand Down
26 changes: 7 additions & 19 deletions src/scss/beverages.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@
box-sizing: inherit;
}

position: relative;
overflow: hidden;

padding: $main-padding;

@import "styles/bubbles";
@import "styles/buttons";
@import "styles/icons";
Expand All @@ -24,23 +29,14 @@

//* The real styling for the app */
@extend .container-fluid;
padding: 7px;
overflow: hidden;

@import "parts/header";
@import "parts/beverage";
@import "parts/beverages";
@import "parts/orders";

//* Utility classes */

// FIXME everything below this line should disappear in the end
.tag {
@each $bev-variant, $icon-map in $bev-variants {
&.#{$bev-variant} {
@include tag-variant(map-get($icon-map, color));
}
}
}

input[type="text"] {
display: inline-block;
border: $input-btn-border-width solid $input-border-color;
Expand All @@ -52,12 +48,4 @@
right: $input-margin-x;
};
}

.dropdown {
display: inline-block;
}

.clearfix {
@include clearfix();
}
}
File renamed without changes.
4 changes: 4 additions & 0 deletions src/scss/parts/_header.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.header {
@include clearfix();

& > * {
padding: $header-padding;
}

.filters {
float: left !important;

Expand Down
88 changes: 88 additions & 0 deletions src/scss/parts/_orders.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
.orders-backdrop, .orders-summary {
position: absolute;
top: 0;

height: 100%;
}

.orders-backdrop {
left: 0;
width: 100%;

display: none;

z-index: $orders-z-index;
background-color: $orders-backdrop-color;

&.visible {
display: block;
}
}

.orders-summary {
right: -$orders-width;
width: $orders-width;

@media (max-width: 992px) {
right: -$orders-width-mobile;
width: $orders-width-mobile;
}

overflow-y: auto;

transition: right 0.3s ease-in-out;

z-index: $orders-z-index + 1;
border-left: 1px solid $orders-border-color;
background: $orders-bg-color;

&.visible {
right: 0;
}

.close {
@include clearfix();
& > span {
float: right;
margin: 5px 10px 0 0;
cursor: pointer;

font-size: larger;
font-weight: bolder;
color: $orders-border-color;
}
}

// Orders are an unordered list
ul {
list-style: none;
padding: 0;

li {
@include clearfix();

padding: $order-padding;

&:not(:last-child) {
border-bottom: 1px solid $orders-border-color;
}

&.click-clear-orders {
cursor: pointer;
}

.quantity {
font-weight: bolder;
@each $bev-variant, $icon-map in $bev-variants {
&.#{$bev-variant} {
color: map-get($icon-map, color);
}
}
}
.prep-info {
width: 50%;
float: left;
}
}
}
}
Loading

0 comments on commit 3d65295

Please sign in to comment.