bterkuile/mozo-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change styling towards design rj

Browse Source
This commit is contained in:
Benjamin ter Kuile
2012-09-02 12:23:08 +02:00
parent 6ad542b65c
commit 50434c28cf
23 changed files with 3087 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/.DS_Store
Vendored
BIN
View File
Binary file not shown.
app/assets/images/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

app/assets/images/scan-logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

app/assets/images/scan-logo.svg
+2327
View File
File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

app/assets/images/textures/wood5.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

app/assets/javascripts/qsupplier.js.coffee
+10 -8
View File
@@ -5,7 +5,16 @@ root.Qsupplier=
section_container = $('.section-tables-active')
section_container.append(table_container)
Qsupplier.position_table_in_active_section(section_container, table_container)
position_table_in_active_section: (section_container, table_container)->
# Set the section id of the table in the database
$.ajax(
type: 'PUT',
url: '/supplier/tables/'+table_container.data('table-id'),
data: {table: {section_id: current_section_id}},
dataType: 'json'
)
position_table_in_active_section: (section_container, table_container, skip_persisting)->
skip_persisting ||= false
button_container = table_container.find('.action-button-container')
button_container.html('')
button_container.append($('<button class="btn btn-warning btn-mini">x</button>').click( -> Qsupplier.move_table_to_inactive_section(table_container.data('table-id')) ))
@@ -29,13 +38,6 @@ root.Qsupplier=
dataType: 'json'
)
)
#TODO make ajax call safe
$.ajax(
type: 'PUT',
url: '/supplier/tables/'+table_container.data('table-id'),
data: {table: {section_id: current_section_id}},
dataType: 'json'
)
move_table_to_inactive_section: (table_id)->
table_container = $('#section-table-'+table_id)
table_container.css('left', 'auto')
app/assets/stylesheets/phone/darkstrap.sass
+286
View File
@@ -0,0 +1,286 @@
@import compass
@import mixins
// Contents:
// =General
// =Breadcrumbs
// =Headings
// =Navigation
// =Forms
// =Tables
// =Pagination
// =Misc
$color: #c6c6c6
$bg: #2f2f2f
$link: #0088cc
$warning: #faa732
$success: #5bb75b
$error: #fc5b5e
// ds original: #FB292D
$info: #3a87ad
$input-bg: #666666
// ds default: #444
$input-border: #111111
// default: white
$input-placeholder: #666666
$input-color: white
//=General ========================================
// Everything with the inset panel just extends .well
.well
+inset-panel-dark
body
background: $bg
color: $color
//=Breadcrumbs =======================================
.breadcrumb
@extend .well
border: 0
//over bs
li
text-shadow: 0 1px 0 #000
//over bs
//=Headings ======================================
.page-header
+horizontal-rule-dark
h1,h2,h3,h4,h5,h6
color: white
h6
color: #999
//=Navigation
.nav .dropdown-menu
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover
background-color: darken($bg, 5%)
border-color: $bg $bg transparent $bg
.nav > .dropdown.active > a:hover
color: #fff
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret
border-top-color: #fff
.nav-tabs
border-bottom: 1px solid #666
& > .active > a,
& > .active > a:hover
background-color: $bg
color: #fff
border-color: #666 #666 transparent #666
& > li > a:hover
border-color: $bg $bg #666666 $bg
background-color: darken($bg, 5%)
color: lighten($link, 10%)
&.nav-stacked
& > li > a,
& > li > a:hover
border-color: #666
.nav-pills
& > li > a:hover
background-color: darken($bg, 5%)
color: lighten($link, 10%)
.nav-list > li > a,
.nav-list .nav-header
text-shadow: 0 1px 0 #000
.nav-list > li > a:hover
background-color: darken($bg, 10%)
color: lighten($link, 10%)
.nav-list .active
& > a:hover
background-color: #0088cc
color: white
.tabs-below .nav-tabs
border-top: 1px solid #666
.tabs-left .nav-tabs
border-right: 1px solid #666
.tabs-right .nav-tabs
border-left: 1px solid #666
.tabs-below .nav-tabs > li > a:hover
border-top: 1px solid #666
.tabs-left .nav-tabs > li > a:hover
border-color: transparent #666 transparent transparent
.tabs-right .nav-tabs > li > a:hover
border-color: transparent transparent transparent #666
.tabs-below .nav-tabs .active > a,
.tabs-below .nav-tabs .active > a:hover
border-color: transparent #666 #666 #666
.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover
border-color: #666 transparent #666 #666
.tabs-right .nav-tabs .active > a,
.tabs-right .nav-tabs .active > a:hover
border-color: #666 #666 #666 transparent
//=Forms ========================================
+placeholder($input-placeholder)
.input-prepend .add-on,
.input-append .add-on
background: #444
color: $color
border-color: #111
text-shadow: 0 1px 0 black
label
color: $color
input,
input[type="file"],
select,
textarea
color: $input-color
//background-color: $input-bg;
border-color: $input-border
@extend .well
.search-query
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0) 0 1px 7px 0px inset
legend
color: white
+horizontal-rule-dark
.form-actions
border-top-color: #222
background-color: #444
.help-inline
color: #999
.control-group
&.warning
+controls($warning)
&.success
+controls($success)
&.error
+controls($error)
//=Tables ========================================
.table
thead
color: white
td
border-top-color: #666
.table-striped
tbody tr:nth-child(2n+1)
td, th
background-color: #444
.table-bordered
border: 1px solid #666
th + th,
td + td,
th + td,
td + th
border-left: 1px solid #666
//=Pagination
.pagination a:hover
color: lighten($link, 10%)
background-color: darken($bg, 5%)
.pagination .active a
color: #fff
background-color: darken($bg, 5%)
.pagination a
border-color: #666
//=Pager
.pager a
background-color: $bg
border-color: #666
&:hover
background-color: darken($bg, 5%)
color: lighten($link, 10%)
//=Alerts
=alert($color)
color: #fff
background-color: $color
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25)
border-color: darken($color, 25%)
h4
color: darken($color, 20%)
.alert
+alert($warning)
.alert-success
+alert($success)
.alert-error
+alert($error)
.alert-info
+alert($info)
//=Modals
.modal
background-color: #444
.modal-header
border-bottom: 1px solid #222
.modal-body p
color: $color
.modal-footer
background-color: darken(#444444, 5%)
border-top: 1px solid #222
+box-shadow(0 1px 0 #333333 inset)
//=Progress bars
.progress
@extend .well
//=Misc ========================================
blockquote
border-left-color: #111
&.pull-right
border-right-color: #111
hr
+horizontal-rule-dark
border-top: none
code
@extend .well
border: none
//over bs
pre
@extend .well
border: none
//over bs
color: $color
app/assets/stylesheets/phone/mixins.sass
+41
View File
@@ -0,0 +1,41 @@
=placeholder($color: $input-placeholder)
\:-moz-placeholder
color: $color
\::-webkit-input-placeholder
color: $color
=controls($color)
& > label,
.help-block,
.help-inline
color: $color
input, select, textarea
//color: lighten($color, 20%);
color: $color
border-color: $color
input:focus,
select:focus,
textarea:focus
border-color: $color
+box-shadow(0 0 6px $color)
=inset-panel-dark
+box-shadow(rgba(white, 0.1) 0 1px 0, rgba(black, 0.8) 0 1px 7px 0px inset)
background: darken(#2f2f2f, 6)
background-color: rgba(black, 0.3)
=horizontal-rule-dark
+box-shadow(rgba(white, 0.07) 0 1px 0)
border-bottom: 1px solid #121212
=horizontal-rule-top-dark
+box-shadow(rgba(white, 0.07) 0 1px 0 inset)
border-top: 1px solid #121212
=vertical-rule-dark
+box-shadow(rgba(white, 0.07) 1px 0 0)
border-right: 1px solid #121212
=vertical-rule-left-dark
+box-shadow(rgba(white, 0.07) 1px 0 0 inset)
border-left: 1px solid #121212
app/assets/stylesheets/phone/structure.css.sass
+45
View File
@@ -1,7 +1,52 @@
@import compass
$side-spacing: 5px
$qbrown: #8B5A2B
html
background-image: image-url('textures/wood5.jpg')
body
padding-left: $side-spacing
padding-right: $side-spacing
background-image: image-url('textures/wood5.jpg')
.home-panel
margin-left: 20px
margin-right: 20px
margin-top: 40px
+box-shadow(#000 10px 10px 16px)
background-color: rgba(240, 240, 240, 0.6)
+border-radius(10px)
.home-header
text-align: center
//background-color: #eee
//+border-top-radius(10px)
//+opacity(0.7)
min-height: 100px
.home-center
padding: 10px
text-align: center
background-color: black
.home-footer
//background-color: #eee
//+border-bottom-radius(10px)
//+opacity(0.7)
min-height: 100px
.home-footer-content
margin-top: 22px
margin-left: auto
margin-right: auto
background-color: green
width: 262px
a
display: block
border: 2px solid black
+border-radius(4px)
+box-shadow(#000 4px 4px 8px)
width: 34px
height: 34px
float: left
margin-right: 15px
background-color: $qbrown
text-align: center
line-height: 34px
//padding-top: 50px
.navbar-fixed-top
margin-left: -$side-spacing
app/assets/stylesheets/tablet/darkstrap.sass
+286
View File
@@ -0,0 +1,286 @@
@import compass
@import mixins
// Contents:
// =General
// =Breadcrumbs
// =Headings
// =Navigation
// =Forms
// =Tables
// =Pagination
// =Misc
$color: #c6c6c6
$bg: #2f2f2f
$link: #0088cc
$warning: #faa732
$success: #5bb75b
$error: #fc5b5e
// ds original: #FB292D
$info: #3a87ad
$input-bg: #666666
// ds default: #444
$input-border: #111111
// default: white
$input-placeholder: #666666
$input-color: white
//=General ========================================
// Everything with the inset panel just extends .well
.well
+inset-panel-dark
body
background: $bg
color: $color
//=Breadcrumbs =======================================
.breadcrumb
@extend .well
border: 0
//over bs
li
text-shadow: 0 1px 0 #000
//over bs
//=Headings ======================================
.page-header
+horizontal-rule-dark
h1,h2,h3,h4,h5,h6
color: white
h6
color: #999
//=Navigation
.nav .dropdown-menu
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > .open.active > a:hover
background-color: darken($bg, 5%)
border-color: $bg $bg transparent $bg
.nav > .dropdown.active > a:hover
color: #fff
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret
border-top-color: #fff
.nav-tabs
border-bottom: 1px solid #666
& > .active > a,
& > .active > a:hover
background-color: $bg
color: #fff
border-color: #666 #666 transparent #666
& > li > a:hover
border-color: $bg $bg #666666 $bg
background-color: darken($bg, 5%)
color: lighten($link, 10%)
&.nav-stacked
& > li > a,
& > li > a:hover
border-color: #666
.nav-pills
& > li > a:hover
background-color: darken($bg, 5%)
color: lighten($link, 10%)
.nav-list > li > a,
.nav-list .nav-header
text-shadow: 0 1px 0 #000
.nav-list > li > a:hover
background-color: darken($bg, 10%)
color: lighten($link, 10%)
.nav-list .active
& > a:hover
background-color: #0088cc
color: white
.tabs-below .nav-tabs
border-top: 1px solid #666
.tabs-left .nav-tabs
border-right: 1px solid #666
.tabs-right .nav-tabs
border-left: 1px solid #666
.tabs-below .nav-tabs > li > a:hover
border-top: 1px solid #666
.tabs-left .nav-tabs > li > a:hover
border-color: transparent #666 transparent transparent
.tabs-right .nav-tabs > li > a:hover
border-color: transparent transparent transparent #666
.tabs-below .nav-tabs .active > a,
.tabs-below .nav-tabs .active > a:hover
border-color: transparent #666 #666 #666
.tabs-left .nav-tabs .active > a,
.tabs-left .nav-tabs .active > a:hover
border-color: #666 transparent #666 #666
.tabs-right .nav-tabs .active > a,
.tabs-right .nav-tabs .active > a:hover
border-color: #666 #666 #666 transparent
//=Forms ========================================
+placeholder($input-placeholder)
.input-prepend .add-on,
.input-append .add-on
background: #444
color: $color
border-color: #111
text-shadow: 0 1px 0 black
label
color: $color
input,
input[type="file"],
select,
textarea
color: $input-color
//background-color: $input-bg;
border-color: $input-border
@extend .well
.search-query
-webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0) 0 1px 7px 0px inset
legend
color: white
+horizontal-rule-dark
.form-actions
border-top-color: #222
background-color: #444
.help-inline
color: #999
.control-group
&.warning
+controls($warning)
&.success
+controls($success)
&.error
+controls($error)
//=Tables ========================================
.table
thead
color: white
td
border-top-color: #666
.table-striped
tbody tr:nth-child(2n+1)
td, th
background-color: #444
.table-bordered
border: 1px solid #666
th + th,
td + td,
th + td,
td + th
border-left: 1px solid #666
//=Pagination
.pagination a:hover
color: lighten($link, 10%)
background-color: darken($bg, 5%)
.pagination .active a
color: #fff
background-color: darken($bg, 5%)
.pagination a
border-color: #666
//=Pager
.pager a
background-color: $bg
border-color: #666
&:hover
background-color: darken($bg, 5%)
color: lighten($link, 10%)
//=Alerts
=alert($color)
color: #fff
background-color: $color
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25)
border-color: darken($color, 25%)
h4
color: darken($color, 20%)
.alert
+alert($warning)
.alert-success
+alert($success)
.alert-error
+alert($error)
.alert-info
+alert($info)
//=Modals
.modal
background-color: #444
.modal-header
border-bottom: 1px solid #222
.modal-body p
color: $color
.modal-footer
background-color: darken(#444444, 5%)
border-top: 1px solid #222
+box-shadow(0 1px 0 #333333 inset)
//=Progress bars
.progress
@extend .well
//=Misc ========================================
blockquote
border-left-color: #111
&.pull-right
border-right-color: #111
hr
+horizontal-rule-dark
border-top: none
code
@extend .well
border: none
//over bs
pre
@extend .well
border: none
//over bs
color: $color
app/assets/stylesheets/tablet/mixins.sass
+41
View File
@@ -0,0 +1,41 @@
=placeholder($color: $input-placeholder)
\:-moz-placeholder
color: $color
\::-webkit-input-placeholder
color: $color
=controls($color)
& > label,
.help-block,
.help-inline
color: $color
input, select, textarea
//color: lighten($color, 20%);
color: $color
border-color: $color
input:focus,
select:focus,
textarea:focus
border-color: $color
+box-shadow(0 0 6px $color)
=inset-panel-dark
+box-shadow(rgba(white, 0.1) 0 1px 0, rgba(black, 0.8) 0 1px 7px 0px inset)
background: darken(#2f2f2f, 6)
background-color: rgba(black, 0.3)
=horizontal-rule-dark
+box-shadow(rgba(white, 0.07) 0 1px 0)
border-bottom: 1px solid #121212
=horizontal-rule-top-dark
+box-shadow(rgba(white, 0.07) 0 1px 0 inset)
border-top: 1px solid #121212
=vertical-rule-dark
+box-shadow(rgba(white, 0.07) 1px 0 0)
border-right: 1px solid #121212
=vertical-rule-left-dark
+box-shadow(rgba(white, 0.07) 1px 0 0 inset)
border-left: 1px solid #121212
app/assets/stylesheets/tablet/structure.css.sass
+3 -2
View File
@@ -1,7 +1,8 @@
$side-spacing: 5px
$side-spacing: 0px
body
padding-left: $side-spacing
padding-right: $side-spacing
background-image: image-url('textures/wood5.jpg')
//padding-top: 50px
.navbar-fixed-top
margin-left: -$side-spacing
@@ -33,7 +34,7 @@ body
position: relative
padding: 0
height: 400px
background-image: image-url('textures/wood4.jpg')
background-image: image-url('textures/wood5.jpg')
.section-table
position: absolute
cursor: move
app/controllers/dashboard_controller.rb
+11 -2
View File
@@ -21,8 +21,17 @@ class DashboardController < ApplicationController
code = {table_id: @table.id}.to_json
respond_to do |format|
format.html
format.svg { render :qrcode => code, :level => :l, :unit => 10, table_number: @table.number }
format.png { render qrcode: code, table_number: @table.number }
format.svg { render :qrcode => code, :level => :l, :unit => 10, table_number: @table.number, qcontainer: true }
format.png { render qrcode: code, table_number: @table.number, qcontainer: true }
end
end
def qr
code = 'qwaiter.com'
respond_to do |format|
format.html
format.svg { render :qrcode => code, :level => :l, :unit => 10}
format.png { render qrcode: code}
end
end
app/controllers/suppliers/sections_controller.rb
+1 -1
View File
@@ -59,7 +59,7 @@ module Suppliers
# PUT /sections/1
# PUT /sections/1.json
def update
@section = Section.find(params[:id])
@section = Section.find_by_supplier_and_id(current_supplier, params[:id])
respond_to do |format|
if @section.update_attributes(params[:section])
app/models/section.rb
+8
View File
@@ -14,6 +14,14 @@ class Section
validates :supplier_id, presence: true
# Probably faster to directly retreive the document and return nil
# if the supplier does not match
def self.find_by_supplier_and_id(supplier, id)
section = find(id)
return nil unless section.supplier_id == supplier.id
section
end
def width
self.path.last.try(:first).to_f - self.path.first.try(:first).to_f
end
app/views/layouts/phone.html.slim
+1 -1
View File
@@ -25,7 +25,7 @@ html lang="en"
activateRotation: function(){}
});
body
body class=action_name
.navbar.navbar-fixed-top
.navbar-inner
.container
app/views/suppliers/product_categories/index.html.slim
+2 -1
View File
@@ -20,5 +20,6 @@
= link_to t("helpers.links.destroy"), [:suppliers, product_category], method: :delete, data: {confirm: are_you_sure? }, class: 'btn btn-mini btn-danger'
- else
= no_content_given model_class
= link_to t("helpers.links.new"), new_suppliers_product_category_path, class: 'btn btn-primary'
.form-actions
= link_to t("helpers.links.new"), new_suppliers_product_category_path, class: 'btn btn-primary'
app/views/suppliers/sections/show.html.slim
+1 -1
View File
@@ -38,6 +38,6 @@
active_section_container.css('width', active_section_container.width()); // break fluid layout
active_section_container.css('height', #{@section.height/@section.width}*active_section_container.width());
active_section_container.find('.section-table').each(function(){
Qsupplier.position_table_in_active_section(active_section_container, $(this));
Qsupplier.position_table_in_active_section(active_section_container, $(this), true);
});
});
app/views/user/home.html.slim
+9 -6
View File
@@ -1,6 +1,9 @@
ul.nav.nav-tabs.nav-stacked
li
button.btn.btn-primary onClick="QMobile.scanQr()" = t('user.home.scan_qr')
- if list_open?
li= link_to t('user.home.show_active_list_products'), user_list_products_path
li= link_to t('user.home.show_active_list'), user_active_list_path
.home-panel
.home-header = image_tag 'logo.png', width: '150', height: '140'
.home-center
a href="#" onClick="QMobile.scanQr()" = image_tag 'scan-logo.png'
.home-footer
.home-footer-content
- if list_open?
= link_to 'P', user_list_products_path
= link_to 'L', user_active_list_path