Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

pushed first layout, list-detail

  • Loading branch information...
commit fe4b90dca0e86a91e2748e4cf8eb93c936e2af52 1 parent 8c1c7d4
@csuwildcat csuwildcat authored
View
113 list-detail/css/general.css
@@ -0,0 +1,113 @@
+
+html, body, #app {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: Segoe UI, Trebuchet MS, Arial;
+}
+
+.flex-stack, .flex-line {
+ display: box;
+ display: -o-box;
+ display: -ms-box;
+ display: -moz-box;
+ display: -webkit-box;
+ display: flex;
+ display: -o-flex;
+ display: -ms-flex;
+ display: -moz-flex;
+ display: -webkit-flex;
+ box-flex: 1;
+ -o-box-flex: 1;
+ -ms-box-flex: 1;
+ -moz-box-flex: 1;
+ -webkit-box-flex: 1;
+ flex: 1;
+ -o-flex: 1;
+ -ms-flex: 1;
+ -moz-flex: 1;
+ -webkit-flex: 1;
+}
+
+ .flex-stack > *, .flex-line > * {
+ box-flex: 1;
+ -o-box-flex: 1;
+ -ms-box-flex: 1;
+ -moz-box-flex: 1;
+ -webkit-box-flex: 1;
+ flex: 1;
+ -o-flex: 1;
+ -ms-flex: 1;
+ -moz-flex: 1;
+ -webkit-flex: 1;
+ }
+
+.flex-stack {
+ box-orient: vertical;
+ -o-box-orient: vertical;
+ -ms-box-orient: vertical;
+ -moz-box-orient: vertical;
+ -webkit-box-orient: vertical;
+ flex-direction: column;
+ -o-flex-direction: column;
+ -ms-flex-direction: column;
+ -moz-flex-direction: column;
+ -webkit-flex-direction: column;
+}
+
+.flex-line {
+ box-orient: horizontal;
+ -o-box-orient: horizontal;
+ -ms-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -webkit-box-orient: horizontal;
+ flex-direction: row;
+ -o-flex-direction: row;
+ -ms-flex-direction: row;
+ -moz-flex-direction: row;
+ -webkit-flex-direction: row;
+}
+
+.flex-center {
+ box-align: center;
+ -o-box-align: center;
+ -ms-box-align: center;
+ -moz-box-align: center;
+ -webkit-box-align: center;
+ align-self: center;
+ -o-align-self: center;
+ -ms-align-self: center;
+ -moz-align-self: center;
+ -webkit-align-self: center;
+}
+
+
+.flex-zero {
+ box-flex: 0;
+ -o-box-flex: 0;
+ -ms-box-flex: 0;
+ -moz-box-flex: 0;
+ -webkit-box-flex: 0;
+ flex: 0;
+ -o-flex: 0;
+ -ms-flex: 0;
+ -moz-flex: 0;
+ -webkit-flex: 0;
+}
+
+.flex-one {
+ box-flex: 1;
+ -o-box-flex: 1;
+ -ms-box-flex: 1;
+ -moz-box-flex: 1;
+ -webkit-box-flex: 1;
+ flex: 1;
+ -o-flex: 1;
+ -ms-flex: 1;
+ -moz-flex: 1;
+ -webkit-flex: 1;
+}
View
152 list-detail/css/layout.css
@@ -0,0 +1,152 @@
+
+#app {
+
+}
+
+#header {
+ position: relative;
+ z-index: 2;
+}
+
+#global_actions_trigger {
+ width: 0;
+ background: url(../shared/arrow_down.png) no-repeat right center;
+ cursor: pointer;
+ transition: width ease-out 0.3s;
+ -o-transition: width ease-out 0.3s;
+ -ms-transition: width ease-out 0.3s;
+ -moz-transition: width ease-out 0.3s;
+ -webkit-transition: width ease-out 0.3s;
+}
+
+#app > section {
+ position: relative;
+}
+
+#content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 1;
+}
+
+#content > x-actionbar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 60px;
+ height: 100%;
+ transition: width ease-out 0.3s;
+ -o-transition: width ease-out 0.3s;
+ -ms-transition: width ease-out 0.3s;
+ -moz-transition: width ease-out 0.3s;
+ -webkit-transition: width ease-out 0.3s;
+}
+
+#content > x-actionbar > x-action {
+ overflow: hidden;
+}
+
+#content > x-shift {
+ width: auto;
+}
+
+#content > x-shift > x-slidebox {
+ height: 100%;
+}
+
+#list {
+ overflow: auto;
+}
+
+#detail {
+ overflow: auto;
+}
+
+/*** Desktop ***/
+
+ @media only screen and (max-width: 520px){
+
+ #global_actions_trigger {
+ width: 22px;
+ }
+
+ #views {
+ width: 100% !important;
+ transform: translateX(0%) !important;
+ }
+
+ #list {
+ width: 38% !important;
+ }
+
+ #detail {
+ width: 62% !important;
+ }
+ }
+
+ @media only screen and (min-width: 520px) and (max-width: 920px) {
+
+ #views {
+ width: 100% !important;
+ transform: translateX(0%) !important;
+ }
+
+ #list {
+ width: 38% !important;
+ }
+
+ #detail {
+ width: 62% !important;
+ }
+ }
+
+ @media only screen and (min-width: 920px) {
+ #content > x-actionbar {
+ width: 120px;
+ }
+
+ #content > x-actionbar > x-action img {
+ width: 24px;
+ }
+
+ #views {
+ width: 100% !important;
+ transform: translateX(0%) !important;
+ }
+
+ #list {
+ width: 28% !important;
+ }
+
+ #detail {
+ width: 72% !important;
+ }
+ }
+
+/*** Tablet ***/
+
+ @media only screen and (min-device-width: 801px) and (max-device-width : 1200px) {
+ #content > x-shift {
+ left: 60px !important;
+ }
+ }
+
+
+/*** Phone ***/
+
+ /* portrait */
+ @media only screen and (max-device-width : 480px) and (orientation: portrait) {
+ #global_actions_trigger {
+ width: 22px;
+ }
+ }
+
+ /* landscape */
+ @media only screen and (min-device-width : 481px) and (max-device-width : 800px) and (orientation: landscape) {
+ #global_actions_trigger {
+ width: 22px;
+ }
+ }
View
114 list-detail/css/style.css
@@ -0,0 +1,114 @@
+
+#header {
+ background: linear-gradient(top, #c66a00, #b54d17);
+ background: -o-linear-gradient(top, #c66a00, #b54d17);
+ background: -ms-linear-gradient(top, #c66a00, #b54d17);
+ background: -moz-linear-gradient(top, #c66a00, #b54d17);
+ background: -webkit-linear-gradient(top, #c66a00, #b54d17);
+ border-bottom: 1px solid #933212;
+ box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
+ -o-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
+ -ms-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
+ -webkit-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.7);
+ -moz-box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7);
+}
+
+#header > x-actionbar {
+ color: #fff;
+ box-pack: end;
+ -o-box-pack: end;
+ -ms-box-pack: end;
+ -moz-box-pack: end;
+ -webkit-box-pack: end;
+}
+
+#header > x-actionbar > x-action {
+ padding: 0 8px;
+ border-right: 1px solid rgba(0,0,0, 0.25);
+ border-left: 1px solid rgba(255,255,255, 0.25);
+}
+
+#header > x-actionbar > x-action:first-child {
+ border-left: none;
+}
+
+#header > x-actionbar > x-action:last-child {
+ border-right: none;
+}
+
+#header > x-actionbar img {
+ width: 24px;
+}
+
+#logo > img {
+ margin: 3px 2px 2px 4px;
+}
+
+#wordmark {
+ font-weight: bold;
+ color: #fff;
+ text-shadow: 0 -1px 0 #933212;
+}
+
+#content {
+ background: url(../shared/checkered-bk.png);
+}
+
+#global_menu {
+ color: #fff;
+ box-orient: vertical;
+ -o-box-orient: vertical;
+ -ms-box-orient: vertical;
+ -moz-box-orient: vertical;
+ -webkit-box-orient: vertical;
+ flex-direction: column;
+ -o-flex-direction: column;
+ -ms-flex-direction: column;
+ -moz-flex-direction: column;
+ -webkit-flex-direction: column;
+}
+
+ #global_menu > x-action {
+ padding: 8px 10px;
+ opacity: 0.6;
+ cursor: pointer;
+ outline: none;
+ }
+
+ #global_menu > x-action[selected] {
+ opacity: 1;
+ cursor: default;
+ background: rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.7) inset, 0 2px 2px -3px rgba(255, 255, 255, 0.5);
+ }
+
+#content > x-shift {
+ box-shadow: -1px 0 6px -3px;
+ background: #fff;
+}
+
+#content > x-shift > x-slidebox {
+ border-left: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+#views > x-slide {
+ border-left: 1px solid rgba(0,0,0, 0.4);
+}
+
+#views > x-slide:first-child {
+ border-left: none;
+}
+
+#list {
+ border: none;
+}
+
+#list ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+#list h4 {
+ margin-bottom: 2px;
+}
View
BIN  list-detail/images/arrow_down.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  list-detail/images/blue-speck-bk.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  list-detail/images/checkered-bk.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  list-detail/images/equalizer.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  list-detail/images/eye.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  list-detail/images/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  list-detail/images/pencil.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
226 list-detail/index.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+ <title>Two Column Layout</title>
+ <link rel="stylesheet" type="text/css" href="../shared/general.css" />
+ <link rel="stylesheet" type="text/css" href="layout.css" />
+ <link rel="stylesheet" type="text/css" href="style.css" />
+ <link rel="stylesheet" type="text/css" href="../../slidebox/slidebox.css" />
+ <link rel="stylesheet" type="text/css" href="../../shiftbox/shiftbox.css" />
+ <link rel="stylesheet" type="text/css" href="../../actionbar/actionbar.css" />
+ <script type="text/javascript" src="../../lib/x-tag/x-tag.js"></script>
+ <script type="text/javascript" src="../../slidebox/slidebox.js"></script>
+ <script type="text/javascript" src="../../shiftbox/shiftbox.js"></script>
+ <script type="text/javascript" src="../../actionbar/actionbar.js"></script>
+
+</head>
+
+<body>
+ <div id="app" class="flex-stack">
+
+ <header id="header" class="flex-line flex-zero">
+ <div id="global_actions_trigger" class="flex-zero"></div>
+ <div id="logo" class="flex-line flex-zero">
+ <img src="../shared/logo.png"/>
+ </div>
+ <div id="wordmark" class="flex-line flex-center">
+ <span>Basic App</span>
+ </div>
+ <x-actionbar id="global_actions" data-mode="full">
+ <x-action label="My Todos" icon="../shared/eye.png" selected></x-action>
+ <x-action label="New Todo" icon="../shared/pencil.png"></x-action>
+ <x-action label="Settings" icon="../shared/equalizer.png"></x-action>
+ </x-actionbar>
+ </header>
+
+ <section>
+ <x-shiftbox id="content">
+
+ <x-actionbar id="global_menu">
+ <x-action label="One" icon="../shared/pencil.png" selected></x-action>
+ <x-action label="Two" icon="../shared/pencil.png"></x-action>
+ <x-action label="Three" icon="../shared/pencil.png"></x-action>
+ </x-actionbar>
+
+ <x-shift>
+ <x-slidebox>
+ <x-slides id="views">
+
+ <x-slide id="list" selected>
+ <ul>
+ <li>
+ <h4>Super cool item 1</h4>
+ <span>Sent: 12:34pm</span>
+ </li>
+ <li>
+ <h4>Super cool item 2</h4>
+ <span>Sent: 12:02pm</span>
+ </li>
+ <li>
+ <h4>Super cool item 3</h4>
+ <span>Sent: 11:46pm</span>
+ </li>
+ </ul>
+ </x-slide>
+
+ <x-slide id="detail">
+ <h2>Foo Detail Section</h2>
+ <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.
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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>
+
+ <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.
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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>
+
+ <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.
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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>
+
+ <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.
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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
+ 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>
+ </x-slide>
+
+ </x-slides>
+ </x-slidebox>
+
+ </x-shift>
+
+ </x-shiftbox>
+ </section>
+
+
+ <footer id="footer" class="flex-line flex-zero">
+
+ </footer>
+
+ </div>
+</body>
+
+<script type="text/javascript">
+
+(function(){
+
+ var attachMediaListener = function(query, fn){
+ fn.mediaListener = window.matchMedia(query);
+ fn.mediaListener.addListener(function(mql){
+ fn(mql);
+ });
+ },
+ mediaMatchListeners = {
+
+ // Small Desktop
+ 'only screen and (max-width: 520px)': function(mql){
+ if (mql.matches) {
+ document.getElementById('content').shift = 0;
+ document.getElementById('global_actions').setAttribute('data-mode', 'icon');
+ }
+ else {
+
+ }
+ },
+
+ // Medium Desktop
+ 'only screen and (min-width: 520px) and (max-width: 920px)': function(mql){
+ if (mql.matches) {
+ document.getElementById('content').shift = 60;
+ document.getElementById('global_actions').setAttribute('data-mode', 'full');
+ }
+ else {
+
+ }
+ },
+
+ // Large Desktop
+ 'only screen and (min-width: 921px)': function(mql){
+ if (mql.matches) {
+ document.getElementById('content').shift = 120;
+ document.getElementById('global_actions').setAttribute('data-mode', 'full');
+ document.querySelector('#content > x-actionbar').setAttribute('data-mode', 'full');
+ }
+ else {
+ document.querySelector('#content > x-actionbar').removeAttribute('data-mode');
+ }
+ },
+
+ // Tablet
+ 'only screen and (min-device-width: 801px) and (max-device-width : 1200px)': function(mql){
+ if (mql.matches) {
+ alert('Tablet ' + mql.matches);
+ document.getElementById('content').shift = 60;
+ document.getElementById('global_actions').setAttribute('data-mode', 'full');
+ }
+ else {
+
+ }
+ },
+
+ // Phone in Portrait
+ 'only screen and (max-device-width : 480px) and (orientation: portrait)': function(mql){
+ if (mql.matches) {
+ document.getElementById('content').shift = 0;
+ document.getElementById('global_actions').setAttribute('data-mode', 'icon');
+ }
+ else {
+
+ }
+ },
+
+ // Phone in Landscape
+ 'only screen and (min-device-width : 481px) and (max-device-width : 800px) and (orientation: landscape) ': function(mql){
+ if (mql.matches) {
+ document.getElementById('content').shift = 0;
+ document.getElementById('global_actions').setAttribute('data-mode', 'icon');
+ }
+ else {
+
+ }
+ }
+ };
+
+ document.addEventListener('DOMContentLoaded', function(){
+ for (var z in mediaMatchListeners){
+ var list = window.matchMedia(z);
+ mediaMatchListeners[z](list);
+ attachMediaListener(z, mediaMatchListeners[z]);
+ }
+ });
+
+ xtag.addEvent(document.getElementById('global_actions_trigger'), 'click:touch', function(){
+ var content = document.getElementById('content');
+ content.shift = (content.shift == false) ? 60 : 0;
+ });
+
+})();
+
+</script>
+
+</html>
View
0  list-detail/xtag.json
No changes.
Please sign in to comment.
Something went wrong with that request. Please try again.