Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

pushed first layout, list-detail

  • Loading branch information...
commit fe4b90dca0e86a91e2748e4cf8eb93c936e2af52 1 parent 8c1c7d4
Daniel Buchner csuwildcat authored
113 list-detail/css/general.css
... ... @@ -0,0 +1,113 @@
  1 +
  2 +html, body, #app {
  3 + height: 100%;
  4 + width: 100%;
  5 + margin: 0;
  6 + padding: 0;
  7 +}
  8 +
  9 +body {
  10 + font-family: Segoe UI, Trebuchet MS, Arial;
  11 +}
  12 +
  13 +.flex-stack, .flex-line {
  14 + display: box;
  15 + display: -o-box;
  16 + display: -ms-box;
  17 + display: -moz-box;
  18 + display: -webkit-box;
  19 + display: flex;
  20 + display: -o-flex;
  21 + display: -ms-flex;
  22 + display: -moz-flex;
  23 + display: -webkit-flex;
  24 + box-flex: 1;
  25 + -o-box-flex: 1;
  26 + -ms-box-flex: 1;
  27 + -moz-box-flex: 1;
  28 + -webkit-box-flex: 1;
  29 + flex: 1;
  30 + -o-flex: 1;
  31 + -ms-flex: 1;
  32 + -moz-flex: 1;
  33 + -webkit-flex: 1;
  34 +}
  35 +
  36 + .flex-stack > *, .flex-line > * {
  37 + box-flex: 1;
  38 + -o-box-flex: 1;
  39 + -ms-box-flex: 1;
  40 + -moz-box-flex: 1;
  41 + -webkit-box-flex: 1;
  42 + flex: 1;
  43 + -o-flex: 1;
  44 + -ms-flex: 1;
  45 + -moz-flex: 1;
  46 + -webkit-flex: 1;
  47 + }
  48 +
  49 +.flex-stack {
  50 + box-orient: vertical;
  51 + -o-box-orient: vertical;
  52 + -ms-box-orient: vertical;
  53 + -moz-box-orient: vertical;
  54 + -webkit-box-orient: vertical;
  55 + flex-direction: column;
  56 + -o-flex-direction: column;
  57 + -ms-flex-direction: column;
  58 + -moz-flex-direction: column;
  59 + -webkit-flex-direction: column;
  60 +}
  61 +
  62 +.flex-line {
  63 + box-orient: horizontal;
  64 + -o-box-orient: horizontal;
  65 + -ms-box-orient: horizontal;
  66 + -moz-box-orient: horizontal;
  67 + -webkit-box-orient: horizontal;
  68 + flex-direction: row;
  69 + -o-flex-direction: row;
  70 + -ms-flex-direction: row;
  71 + -moz-flex-direction: row;
  72 + -webkit-flex-direction: row;
  73 +}
  74 +
  75 +.flex-center {
  76 + box-align: center;
  77 + -o-box-align: center;
  78 + -ms-box-align: center;
  79 + -moz-box-align: center;
  80 + -webkit-box-align: center;
  81 + align-self: center;
  82 + -o-align-self: center;
  83 + -ms-align-self: center;
  84 + -moz-align-self: center;
  85 + -webkit-align-self: center;
  86 +}
  87 +
  88 +
  89 +.flex-zero {
  90 + box-flex: 0;
  91 + -o-box-flex: 0;
  92 + -ms-box-flex: 0;
  93 + -moz-box-flex: 0;
  94 + -webkit-box-flex: 0;
  95 + flex: 0;
  96 + -o-flex: 0;
  97 + -ms-flex: 0;
  98 + -moz-flex: 0;
  99 + -webkit-flex: 0;
  100 +}
  101 +
  102 +.flex-one {
  103 + box-flex: 1;
  104 + -o-box-flex: 1;
  105 + -ms-box-flex: 1;
  106 + -moz-box-flex: 1;
  107 + -webkit-box-flex: 1;
  108 + flex: 1;
  109 + -o-flex: 1;
  110 + -ms-flex: 1;
  111 + -moz-flex: 1;
  112 + -webkit-flex: 1;
  113 +}
152 list-detail/css/layout.css
... ... @@ -0,0 +1,152 @@
  1 +
  2 +#app {
  3 +
  4 +}
  5 +
  6 +#header {
  7 + position: relative;
  8 + z-index: 2;
  9 +}
  10 +
  11 +#global_actions_trigger {
  12 + width: 0;
  13 + background: url(../shared/arrow_down.png) no-repeat right center;
  14 + cursor: pointer;
  15 + transition: width ease-out 0.3s;
  16 + -o-transition: width ease-out 0.3s;
  17 + -ms-transition: width ease-out 0.3s;
  18 + -moz-transition: width ease-out 0.3s;
  19 + -webkit-transition: width ease-out 0.3s;
  20 +}
  21 +
  22 +#app > section {
  23 + position: relative;
  24 +}
  25 +
  26 +#content {
  27 + position: absolute;
  28 + top: 0;
  29 + left: 0;
  30 + right: 0;
  31 + bottom: 0;
  32 + z-index: 1;
  33 +}
  34 +
  35 +#content > x-actionbar {
  36 + position: absolute;
  37 + top: 0;
  38 + left: 0;
  39 + width: 60px;
  40 + height: 100%;
  41 + transition: width ease-out 0.3s;
  42 + -o-transition: width ease-out 0.3s;
  43 + -ms-transition: width ease-out 0.3s;
  44 + -moz-transition: width ease-out 0.3s;
  45 + -webkit-transition: width ease-out 0.3s;
  46 +}
  47 +
  48 +#content > x-actionbar > x-action {
  49 + overflow: hidden;
  50 +}
  51 +
  52 +#content > x-shift {
  53 + width: auto;
  54 +}
  55 +
  56 +#content > x-shift > x-slidebox {
  57 + height: 100%;
  58 +}
  59 +
  60 +#list {
  61 + overflow: auto;
  62 +}
  63 +
  64 +#detail {
  65 + overflow: auto;
  66 +}
  67 +
  68 +/*** Desktop ***/
  69 +
  70 + @media only screen and (max-width: 520px){
  71 +
  72 + #global_actions_trigger {
  73 + width: 22px;
  74 + }
  75 +
  76 + #views {
  77 + width: 100% !important;
  78 + transform: translateX(0%) !important;
  79 + }
  80 +
  81 + #list {
  82 + width: 38% !important;
  83 + }
  84 +
  85 + #detail {
  86 + width: 62% !important;
  87 + }
  88 + }
  89 +
  90 + @media only screen and (min-width: 520px) and (max-width: 920px) {
  91 +
  92 + #views {
  93 + width: 100% !important;
  94 + transform: translateX(0%) !important;
  95 + }
  96 +
  97 + #list {
  98 + width: 38% !important;
  99 + }
  100 +
  101 + #detail {
  102 + width: 62% !important;
  103 + }
  104 + }
  105 +
  106 + @media only screen and (min-width: 920px) {
  107 + #content > x-actionbar {
  108 + width: 120px;
  109 + }
  110 +
  111 + #content > x-actionbar > x-action img {
  112 + width: 24px;
  113 + }
  114 +
  115 + #views {
  116 + width: 100% !important;
  117 + transform: translateX(0%) !important;
  118 + }
  119 +
  120 + #list {
  121 + width: 28% !important;
  122 + }
  123 +
  124 + #detail {
  125 + width: 72% !important;
  126 + }
  127 + }
  128 +
  129 +/*** Tablet ***/
  130 +
  131 + @media only screen and (min-device-width: 801px) and (max-device-width : 1200px) {
  132 + #content > x-shift {
  133 + left: 60px !important;
  134 + }
  135 + }
  136 +
  137 +
  138 +/*** Phone ***/
  139 +
  140 + /* portrait */
  141 + @media only screen and (max-device-width : 480px) and (orientation: portrait) {
  142 + #global_actions_trigger {
  143 + width: 22px;
  144 + }
  145 + }
  146 +
  147 + /* landscape */
  148 + @media only screen and (min-device-width : 481px) and (max-device-width : 800px) and (orientation: landscape) {
  149 + #global_actions_trigger {
  150 + width: 22px;
  151 + }
  152 + }
114 list-detail/css/style.css
... ... @@ -0,0 +1,114 @@
  1 +
  2 +#header {
  3 + background: linear-gradient(top, #c66a00, #b54d17);
  4 + background: -o-linear-gradient(top, #c66a00, #b54d17);
  5 + background: -ms-linear-gradient(top, #c66a00, #b54d17);
  6 + background: -moz-linear-gradient(top, #c66a00, #b54d17);
  7 + background: -webkit-linear-gradient(top, #c66a00, #b54d17);
  8 + border-bottom: 1px solid #933212;
  9 + box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
  10 + -o-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
  11 + -ms-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
  12 + -webkit-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.7);
  13 + -moz-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
  14 +}
  15 +
  16 +#header > x-actionbar {
  17 + color: #fff;
  18 + box-pack: end;
  19 + -o-box-pack: end;
  20 + -ms-box-pack: end;
  21 + -moz-box-pack: end;
  22 + -webkit-box-pack: end;
  23 +}
  24 +
  25 +#header > x-actionbar > x-action {
  26 + padding: 0 8px;
  27 + border-right: 1px solid rgba(0,0,0, 0.25);
  28 + border-left: 1px solid rgba(255,255,255, 0.25);
  29 +}
  30 +
  31 +#header > x-actionbar > x-action:first-child {
  32 + border-left: none;
  33 +}
  34 +
  35 +#header > x-actionbar > x-action:last-child {
  36 + border-right: none;
  37 +}
  38 +
  39 +#header > x-actionbar img {
  40 + width: 24px;
  41 +}
  42 +
  43 +#logo > img {
  44 + margin: 3px 2px 2px 4px;
  45 +}
  46 +
  47 +#wordmark {
  48 + font-weight: bold;
  49 + color: #fff;
  50 + text-shadow: 0 -1px 0 #933212;
  51 +}
  52 +
  53 +#content {
  54 + background: url(../shared/checkered-bk.png);
  55 +}
  56 +
  57 +#global_menu {
  58 + color: #fff;
  59 + box-orient: vertical;
  60 + -o-box-orient: vertical;
  61 + -ms-box-orient: vertical;
  62 + -moz-box-orient: vertical;
  63 + -webkit-box-orient: vertical;
  64 + flex-direction: column;
  65 + -o-flex-direction: column;
  66 + -ms-flex-direction: column;
  67 + -moz-flex-direction: column;
  68 + -webkit-flex-direction: column;
  69 +}
  70 +
  71 + #global_menu > x-action {
  72 + padding: 8px 10px;
  73 + opacity: 0.6;
  74 + cursor: pointer;
  75 + outline: none;
  76 + }
  77 +
  78 + #global_menu > x-action[selected] {
  79 + opacity: 1;
  80 + cursor: default;
  81 + background: rgba(0, 0, 0, 0.3);
  82 + box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7) inset, 0 2px 2px -3px rgba(255, 255, 255, 0.5);
  83 + }
  84 +
  85 +#content > x-shift {
  86 + box-shadow: -1px 0 6px -3px;
  87 + background: #fff;
  88 +}
  89 +
  90 +#content > x-shift > x-slidebox {
  91 + border-left: 1px solid rgba(255, 255, 255, 0.2);
  92 +}
  93 +
  94 +#views > x-slide {
  95 + border-left: 1px solid rgba(0,0,0, 0.4);
  96 +}
  97 +
  98 +#views > x-slide:first-child {
  99 + border-left: none;
  100 +}
  101 +
  102 +#list {
  103 + border: none;
  104 +}
  105 +
  106 +#list ul {
  107 + list-style: none;
  108 + padding: 0;
  109 + margin: 0;
  110 +}
  111 +
  112 +#list h4 {
  113 + margin-bottom: 2px;
  114 +}
BIN  list-detail/images/arrow_down.png
BIN  list-detail/images/blue-speck-bk.png
BIN  list-detail/images/checkered-bk.png
BIN  list-detail/images/equalizer.png
BIN  list-detail/images/eye.png
BIN  list-detail/images/logo.png
BIN  list-detail/images/pencil.png
226 list-detail/index.html
... ... @@ -0,0 +1,226 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="utf-8">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
  7 + <title>Two Column Layout</title>
  8 + <link rel="stylesheet" type="text/css" href="../shared/general.css" />
  9 + <link rel="stylesheet" type="text/css" href="layout.css" />
  10 + <link rel="stylesheet" type="text/css" href="style.css" />
  11 + <link rel="stylesheet" type="text/css" href="../../slidebox/slidebox.css" />
  12 + <link rel="stylesheet" type="text/css" href="../../shiftbox/shiftbox.css" />
  13 + <link rel="stylesheet" type="text/css" href="../../actionbar/actionbar.css" />
  14 + <script type="text/javascript" src="../../lib/x-tag/x-tag.js"></script>
  15 + <script type="text/javascript" src="../../slidebox/slidebox.js"></script>
  16 + <script type="text/javascript" src="../../shiftbox/shiftbox.js"></script>
  17 + <script type="text/javascript" src="../../actionbar/actionbar.js"></script>
  18 +
  19 +</head>
  20 +
  21 +<body>
  22 + <div id="app" class="flex-stack">
  23 +
  24 + <header id="header" class="flex-line flex-zero">
  25 + <div id="global_actions_trigger" class="flex-zero"></div>
  26 + <div id="logo" class="flex-line flex-zero">
  27 + <img src="../shared/logo.png"/>
  28 + </div>
  29 + <div id="wordmark" class="flex-line flex-center">
  30 + <span>Basic App</span>
  31 + </div>
  32 + <x-actionbar id="global_actions" data-mode="full">
  33 + <x-action label="My Todos" icon="../shared/eye.png" selected></x-action>
  34 + <x-action label="New Todo" icon="../shared/pencil.png"></x-action>
  35 + <x-action label="Settings" icon="../shared/equalizer.png"></x-action>
  36 + </x-actionbar>
  37 + </header>
  38 +
  39 + <section>
  40 + <x-shiftbox id="content">
  41 +
  42 + <x-actionbar id="global_menu">
  43 + <x-action label="One" icon="../shared/pencil.png" selected></x-action>
  44 + <x-action label="Two" icon="../shared/pencil.png"></x-action>
  45 + <x-action label="Three" icon="../shared/pencil.png"></x-action>
  46 + </x-actionbar>
  47 +
  48 + <x-shift>
  49 + <x-slidebox>
  50 + <x-slides id="views">
  51 +
  52 + <x-slide id="list" selected>
  53 + <ul>
  54 + <li>
  55 + <h4>Super cool item 1</h4>
  56 + <span>Sent: 12:34pm</span>
  57 + </li>
  58 + <li>
  59 + <h4>Super cool item 2</h4>
  60 + <span>Sent: 12:02pm</span>
  61 + </li>
  62 + <li>
  63 + <h4>Super cool item 3</h4>
  64 + <span>Sent: 11:46pm</span>
  65 + </li>
  66 + </ul>
  67 + </x-slide>
  68 +
  69 + <x-slide id="detail">
  70 + <h2>Foo Detail Section</h2>
  71 + <p>All the railway lines north of the Thames and the South-Eastern people at Cannon Street had been warned by midnight on Sunday, and trains were being filled.
  72 + People were fighting savagely for standing-room in the carriages even at two o'clock. By three, people were being trampled and crushed even in Bishopsgate
  73 + Street, a couple of hundred yards or more from Liverpool Street station; revolvers were fired, people stabbed, and the policemen who had been sent to direct
  74 + the traffic, exhausted and infuriated, were breaking the heads of the people they were called out to protect. And as the day advanced and the engine drivers
  75 + and stokers refused to return to London, the pressure of the flight drove the people in an ever-thickening multitude away from the stations and along the
  76 + northward-running roads. By midday a Martian had been seen at Barnes, and a cloud of slowly sinking black vapour drove along the Thames and across the flats
  77 + of Lambeth, cutting off all escape over the bridges in its sluggish advance. Another bank drove over Ealing, and surrounded a little island of survivors on
  78 + Castle Hill, alive, but unable to escape. So he got out of the fury of the panic, and, skirting the Edgware Road, reached Edgware about seven, fasting and
  79 + wearied, but well ahead of the crowd. Along the road people were standing in the roadway, curious, wondering. He was passed by a number of</p>
  80 +
  81 + <p>All the railway lines north of the Thames and the South-Eastern people at Cannon Street had been warned by midnight on Sunday, and trains were being filled.
  82 + People were fighting savagely for standing-room in the carriages even at two o'clock. By three, people were being trampled and crushed even in Bishopsgate
  83 + Street, a couple of hundred yards or more from Liverpool Street station; revolvers were fired, people stabbed, and the policemen who had been sent to direct
  84 + the traffic, exhausted and infuriated, were breaking the heads of the people they were called out to protect. And as the day advanced and the engine drivers
  85 + and stokers refused to return to London, the pressure of the flight drove the people in an ever-thickening multitude away from the stations and along the
  86 + northward-running roads. By midday a Martian had been seen at Barnes, and a cloud of slowly sinking black vapour drove along the Thames and across the flats
  87 + of Lambeth, cutting off all escape over the bridges in its sluggish advance. Another bank drove over Ealing, and surrounded a little island of survivors on
  88 + Castle Hill, alive, but unable to escape. So he got out of the fury of the panic, and, skirting the Edgware Road, reached Edgware about seven, fasting and
  89 + wearied, but well ahead of the crowd. Along the road people were standing in the roadway, curious, wondering. He was passed by a number of</p>
  90 +
  91 + <p>All the railway lines north of the Thames and the South-Eastern people at Cannon Street had been warned by midnight on Sunday, and trains were being filled.
  92 + People were fighting savagely for standing-room in the carriages even at two o'clock. By three, people were being trampled and crushed even in Bishopsgate
  93 + Street, a couple of hundred yards or more from Liverpool Street station; revolvers were fired, people stabbed, and the policemen who had been sent to direct
  94 + the traffic, exhausted and infuriated, were breaking the heads of the people they were called out to protect. And as the day advanced and the engine drivers
  95 + and stokers refused to return to London, the pressure of the flight drove the people in an ever-thickening multitude away from the stations and along the
  96 + northward-running roads. By midday a Martian had been seen at Barnes, and a cloud of slowly sinking black vapour drove along the Thames and across the flats
  97 + of Lambeth, cutting off all escape over the bridges in its sluggish advance. Another bank drove over Ealing, and surrounded a little island of survivors on
  98 + Castle Hill, alive, but unable to escape. So he got out of the fury of the panic, and, skirting the Edgware Road, reached Edgware about seven, fasting and
  99 + wearied, but well ahead of the crowd. Along the road people were standing in the roadway, curious, wondering. He was passed by a number of</p>
  100 +
  101 + <p>All the railway lines north of the Thames and the South-Eastern people at Cannon Street had been warned by midnight on Sunday, and trains were being filled.
  102 + People were fighting savagely for standing-room in the carriages even at two o'clock. By three, people were being trampled and crushed even in Bishopsgate
  103 + Street, a couple of hundred yards or more from Liverpool Street station; revolvers were fired, people stabbed, and the policemen who had been sent to direct
  104 + the traffic, exhausted and infuriated, were breaking the heads of the people they were called out to protect. And as the day advanced and the engine drivers
  105 + and stokers refused to return to London, the pressure of the flight drove the people in an ever-thickening multitude away from the stations and along the
  106 + northward-running roads. By midday a Martian had been seen at Barnes, and a cloud of slowly sinking black vapour drove along the Thames and across the flats
  107 + of Lambeth, cutting off all escape over the bridges in its sluggish advance. Another bank drove over Ealing, and surrounded a little island of survivors on
  108 + Castle Hill, alive, but unable to escape. So he got out of the fury of the panic, and, skirting the Edgware Road, reached Edgware about seven, fasting and
  109 + wearied, but well ahead of the crowd. Along the road people were standing in the roadway, curious, wondering. He was passed by a number of</p>
  110 + </x-slide>
  111 +
  112 + </x-slides>
  113 + </x-slidebox>
  114 +
  115 + </x-shift>
  116 +
  117 + </x-shiftbox>
  118 + </section>
  119 +
  120 +
  121 + <footer id="footer" class="flex-line flex-zero">
  122 +
  123 + </footer>
  124 +
  125 + </div>
  126 +</body>
  127 +
  128 +<script type="text/javascript">
  129 +
  130 +(function(){
  131 +
  132 + var attachMediaListener = function(query, fn){
  133 + fn.mediaListener = window.matchMedia(query);
  134 + fn.mediaListener.addListener(function(mql){
  135 + fn(mql);
  136 + });
  137 + },
  138 + mediaMatchListeners = {
  139 +
  140 + // Small Desktop
  141 + 'only screen and (max-width: 520px)': function(mql){
  142 + if (mql.matches) {
  143 + document.getElementById('content').shift = 0;
  144 + document.getElementById('global_actions').setAttribute('data-mode', 'icon');
  145 + }
  146 + else {
  147 +
  148 + }
  149 + },
  150 +
  151 + // Medium Desktop
  152 + 'only screen and (min-width: 520px) and (max-width: 920px)': function(mql){
  153 + if (mql.matches) {
  154 + document.getElementById('content').shift = 60;
  155 + document.getElementById('global_actions').setAttribute('data-mode', 'full');
  156 + }
  157 + else {
  158 +
  159 + }
  160 + },
  161 +
  162 + // Large Desktop
  163 + 'only screen and (min-width: 921px)': function(mql){
  164 + if (mql.matches) {
  165 + document.getElementById('content').shift = 120;
  166 + document.getElementById('global_actions').setAttribute('data-mode', 'full');
  167 + document.querySelector('#content > x-actionbar').setAttribute('data-mode', 'full');
  168 + }
  169 + else {
  170 + document.querySelector('#content > x-actionbar').removeAttribute('data-mode');
  171 + }
  172 + },
  173 +
  174 + // Tablet
  175 + 'only screen and (min-device-width: 801px) and (max-device-width : 1200px)': function(mql){
  176 + if (mql.matches) {
  177 + alert('Tablet ' + mql.matches);
  178 + document.getElementById('content').shift = 60;
  179 + document.getElementById('global_actions').setAttribute('data-mode', 'full');
  180 + }
  181 + else {
  182 +
  183 + }
  184 + },
  185 +
  186 + // Phone in Portrait
  187 + 'only screen and (max-device-width : 480px) and (orientation: portrait)': function(mql){
  188 + if (mql.matches) {
  189 + document.getElementById('content').shift = 0;
  190 + document.getElementById('global_actions').setAttribute('data-mode', 'icon');
  191 + }
  192 + else {
  193 +
  194 + }
  195 + },
  196 +
  197 + // Phone in Landscape
  198 + 'only screen and (min-device-width : 481px) and (max-device-width : 800px) and (orientation: landscape) ': function(mql){
  199 + if (mql.matches) {
  200 + document.getElementById('content').shift = 0;
  201 + document.getElementById('global_actions').setAttribute('data-mode', 'icon');
  202 + }
  203 + else {
  204 +
  205 + }
  206 + }
  207 + };
  208 +
  209 + document.addEventListener('DOMContentLoaded', function(){
  210 + for (var z in mediaMatchListeners){
  211 + var list = window.matchMedia(z);
  212 + mediaMatchListeners[z](list);
  213 + attachMediaListener(z, mediaMatchListeners[z]);
  214 + }
  215 + });
  216 +
  217 + xtag.addEvent(document.getElementById('global_actions_trigger'), 'click:touch', function(){
  218 + var content = document.getElementById('content');
  219 + content.shift = (content.shift == false) ? 60 : 0;
  220 + });
  221 +
  222 +})();
  223 +
  224 +</script>
  225 +
  226 +</html>
0  list-detail/xtag.json
No changes.

0 comments on commit fe4b90d

Please sign in to comment.
Something went wrong with that request. Please try again.