From 019938f2c803257409b4477b218b1cf6661bff71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20van=20der=20Essen?= Date: Thu, 5 Dec 2013 18:53:25 +0100 Subject: [PATCH] [WIP] point_of_sale: finished css optimisations bzr revid: fva@openerp.com-20131205175325-8v81lfj69020x0qe --- addons/point_of_sale/controllers/main.py | 7 +- addons/point_of_sale/static/src/css/pos.css | 174 +++++++++++------- .../static/src/img/bc-arrow-big.png | Bin 0 -> 315 bytes addons/point_of_sale/static/src/js/models.js | 1 - addons/point_of_sale/static/src/js/screens.js | 47 ++--- addons/point_of_sale/static/src/js/widgets.js | 102 +++++----- addons/point_of_sale/static/src/xml/pos.xml | 75 ++++---- 7 files changed, 216 insertions(+), 190 deletions(-) create mode 100644 addons/point_of_sale/static/src/img/bc-arrow-big.png diff --git a/addons/point_of_sale/controllers/main.py b/addons/point_of_sale/controllers/main.py index 705fd853ec1..4871997f5de 100644 --- a/addons/point_of_sale/controllers/main.py +++ b/addons/point_of_sale/controllers/main.py @@ -32,8 +32,7 @@ html_template = """ - - %(css)s + %(js)s ' % i for i in js_list) - css = "\n".join('' % i for i in css_list) + #css = "\n".join('' % i for i in css_list) r = html_template % { 'js': js, - 'css': css, + # 'css': css, 'modules': simplejson.dumps(module_boot(request.db)), 'init': """ console.log('LOADED'); diff --git a/addons/point_of_sale/static/src/css/pos.css b/addons/point_of_sale/static/src/css/pos.css index 18673ec1cc2..52d2ec291e1 100644 --- a/addons/point_of_sale/static/src/css/pos.css +++ b/addons/point_of_sale/static/src/css/pos.css @@ -1,34 +1,35 @@ +/* --- Fonts --- */ + @font-face{ font-family: 'Inconsolata'; src: url(../fonts/Inconsolata.otf); } +/* --- Generic Restyling and Resets --- */ + +html { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +table { + border-spacing: 0px; + border-collapse: collapse; +} +td { + padding: 0px; +} + .oe_hidden{ display: none !important; } - -.pos { - padding: 0; - margin: 0; - background-color: #f0eeee; - font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial; - color: #555555; - font-size: 12px; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; - text-shadow: none; - overflow: hidden; +.clearfix:after { + content:" "; + display: block; + visibility: hidden; + line-height: 0; + height: 0; + clear: both; } -.pos * { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} .pos input::-webkit-outer-spin-button, .pos input::-webkit-inner-spin-button { @@ -55,6 +56,25 @@ list-style-type: none; } +.pos { + padding: 0; + margin: 0; + background-color: #f0eeee; + font-family: "Lato","Lucida Grande", Helvetica, Verdana, Arial; + color: #555555; + font-size: 12px; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + text-shadow: none; + overflow: hidden; +} + /* ********* The black loading screen ********* */ .pos .loader{ @@ -66,6 +86,7 @@ height:100%; z-index: 999; text-align: center; + font-family: Lato; } /* ********* Generic Layout Constructs ********* */ @@ -143,6 +164,7 @@ font-size: 11px; border: 1px solid #cacaca; background: #e2e2e2; + border-radius: 3px; } .pos ul, .pos ol { padding: 0; @@ -157,10 +179,6 @@ .pos .pos-center-align { text-align: center; } -.pos .pos-right-align input { - text-align: right; - border: 1px solid #cecbcb; -} .pos .pos-disc-font { font-size: 12px; font-style:italic; @@ -198,7 +216,7 @@ line-height:100%; vertical-align: middle; } -.pos .pos-branding img { +.pos .pos-logo { height: 32px; width: 116px; margin-left:5px; @@ -223,7 +241,7 @@ height:100%; } -.pos .pos-rightheader button { +.pos .order-button{ color: #273072; height:27px; margin:3px; @@ -231,28 +249,27 @@ border: 1px solid #353A7E; background: #7f82ac; text-shadow: none; + border-radius: 3px; +} +.pos .order-button.selected{ + font-weight: 900; + background: #666997; + color: rgb(236, 237, 255); } -.pos .pos-rightheader button.square{ +.pos .order-button.square{ width: 32px; margin-left:4px; } .pos .order-selector { - display: inline; + display: inline-block; } .pos .orders { - display: inline; + display: inline-block; + vertical-align: top; margin-left: 8px; } -.pos .order-selector-button { - display: inline; -} -.pos .selected-order button { - font-weight: 900; - background: #7174A8 !important; - color: rgb(236, 237, 255) !important; -} /* c) The session buttons */ @@ -261,8 +278,8 @@ height:32px; padding-left:10px; padding-right:10px; - border-right: 1px solid #3a3a3a; - border-left: 1px solid #3a3a3a; + border-right: 1px solid #292929; + border-left: 1px solid #292929; color:#DDD; line-height:32px; text-align:center; @@ -392,7 +409,7 @@ /* ********* The right pane contains the screens and headers ********* */ -.pos .pos-rightpane { +.pos .rightpane { position: absolute; top: 0; /*bottom: 105px;*/ @@ -400,19 +417,22 @@ left: 440px; right: 0; vertical-align: top; + -webkit-transform: translate3d(0,0,0); } -.pos .pos-rightpane header { +.pos .rightpane-header { padding: 0; - height: 32px; + height: 48px; border-bottom: 1px solid #c7c7c7; background: #d3d3d3; + text-align: center; } /* ********* The product list ********* */ .pos .product-list { - padding:10px !important; + padding: 10px; + text-align: left; -webkit-transform: translate3d(0,0,0); } @@ -439,29 +459,36 @@ /* a) the product list navigation bar */ -.pos .breadcrumb li { - float: left; - line-height: 32px; - height: 32px; +.pos .breadcrumbs{ + display: inline-block; + text-align: left; + float:left; } -.pos .breadcrumb li:last-child { +.pos .breadcrumb{ + float: left; + display: inline-block; + line-height: 48px; + height: 48px; + min-width: 48px; +} +.pos .breadcrumb:last-child { padding-right: 3px; border-right: 1px solid #c5c5c5; } -.pos .breadcrumb a { +.pos .breadcrumb-button { display: inline-block; padding: 0 9px; vertical-align: top; - color: #555555; - font-weight: bold; + color: #808080; + font-size: 14px; + cursor: pointer; } -.pos .bc-arrow { - height: 33px; +.pos .breadcrumb-arrow{ + width: 28px; } -.pos .homeimg { - width: 19px; - height: 19px; - margin: 6px 0; +.pos .breadcrumb-homeimg { + width: 27px; + margin: 12px 6px; } /* b) the search box */ @@ -471,19 +498,28 @@ right: 2px; } .pos .searchbox input { - width: 130px; + width: 100px; border: 1px solid #cecbcb; - padding: 3px 19px; + padding: 10px 20px; + padding-left: 38px; margin: 6px; - background: url("../img/search.png") no-repeat 5px; + background: url("../img/search.png") no-repeat 15px; background-color: white; + border-radius: 20px; + font-family: Lato; +} +.pos .searchbox input:focus { + outline: none; + box-shadow: 0px 0px 0px 2px rgb(153, 153, 255) inset; + color: rgb(153, 153, 255); } .pos .search-clear { position: absolute; + width: 30px; + height: 30px; top: 11px; - right: 11px; + left: 11px; cursor: pointer; - display: none; } /* c) the categories list */ @@ -498,7 +534,8 @@ } .pos .category-list{ - padding:10px !important; + text-align: left; + padding: 10px; } /* d) the category button */ @@ -726,6 +763,9 @@ box-sizing: border-box; border-radius: 3px; } +.pos .paymentline-name{ + margin-bottom: 8px; +} .pos .paymentline-input{ font-size: 20px; font-family: Lato; @@ -738,6 +778,7 @@ background: white; color: #484848; text-align: right; + border-radius: 3px; box-shadow: 0px 2px rgba(143, 143, 143, 0.3) inset; } @@ -803,6 +844,8 @@ padding-bottom:30px; display: inline-block; font-family: "Inconsolata"; + border: solid 1px rgb(220,220,220); + border-radius: 3px; } .pos .pos-sale-ticket .emph{ font-size: 20px; @@ -829,7 +872,7 @@ .pos .pos-content { top: 0px !important; } - .pos .pos-rightpane { + .pos .rightpane { left: 0px !important; background-color: white; } @@ -1133,6 +1176,7 @@ cursor: pointer; border: 1px solid #cacaca; + border-radius: 3px; background: #e2e2e2; } diff --git a/addons/point_of_sale/static/src/img/bc-arrow-big.png b/addons/point_of_sale/static/src/img/bc-arrow-big.png new file mode 100644 index 0000000000000000000000000000000000000000..f845fe6837d05cd3549d3873024e4074fbd39c26 GIT binary patch literal 315 zcmeAS@N?(olHy`uVBq!ia0vp^GC*v=!3HFmlBI3}DYhhUcNd1sAh?`)+ee@XXMsm# zF#`j)FbFd;%$g$s6l5>)^mS#w%freeZ&4%h9b~`>PZ!6Kh{JEE@8vyYAi~z)p(&xv zn$&d0@h}U|0j3-WK`$#VwH<+%mL#)fIJLJ3%~>w+Cn~z`m)~>yir`mKwE~e@Yp-4O zmEP*L^Vz4vKiD!FUEOALWxCzo-8JuX`2kIN4$X=G
- +
- - -
    + + +
    @@ -45,7 +45,7 @@
    -
    +
    @@ -137,49 +137,49 @@ -
  1. +
    -
    2. +     -
  2. + -
    3. +
    -
    -
      -
    1. - - - -
      2. +
      +
      + + + + + -
    2. - - + + + - -
      3. + +       -
    +
    - +
    -
      -
    +
    +
    @@ -188,8 +188,8 @@
    -
      -
    +
    +
    @@ -219,7 +219,6 @@
    -

    Product Weighting

    @@ -245,7 +244,6 @@

    -

    Payment

    @@ -275,7 +273,6 @@
    -

    Receipt

    @@ -285,7 +282,7 @@
    -

    Welcome

    +

    Welcome

    Please scan an item or your member card

    @@ -299,14 +296,14 @@
    -

    Please scan an item

    +

    Please scan an item
    -

    Payment

    +

    Payment

    Please insert your card in the reader and follow the instructions to complete @@ -317,7 +314,7 @@

    -

    Please put your product on the scale

    +

    Please put your product on the scale

    @@ -415,7 +412,7 @@ -
  3. +
    @@ -432,7 +429,7 @@
    -
    4. +     @@ -446,7 +443,7 @@ -
    +
    Total: 0.00 € @@ -578,9 +575,7 @@ -
  4. - -
    5. +