From 9983410594039e253a80a54a0401226bd04f2135 Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Thu, 22 Nov 2012 12:36:43 -0700 Subject: [PATCH] Start reorg of stylesheets in anticipation of visual changes. --- app/assets/images/logo.png | Bin 0 -> 6047 bytes app/assets/javascripts/layout.js | 6 +- app/assets/stylesheets/client/common.css.scss | 8 + app/assets/stylesheets/client/dialog.css.scss | 25 ++ app/assets/stylesheets/client/footer.css.scss | 24 ++ app/assets/stylesheets/client/header.css.scss | 51 ++++ app/assets/stylesheets/client/home.css.scss | 23 ++ .../stylesheets/client/jamkazam.css.scss | 251 +----------------- app/assets/stylesheets/client/notify.css.scss | 11 + .../stylesheets/client/session.css.scss | 49 ++++ .../stylesheets/client/sidebar.css.scss | 67 +++++ app/views/clients/index.html.erb | 15 +- app/views/layouts/client.html.erb | 8 + app/views/layouts/hold | 0 spec/javascripts/layout.spec.js | 4 +- 15 files changed, 294 insertions(+), 248 deletions(-) create mode 100644 app/assets/images/logo.png create mode 100644 app/assets/stylesheets/client/dialog.css.scss create mode 100644 app/assets/stylesheets/client/footer.css.scss create mode 100644 app/assets/stylesheets/client/header.css.scss create mode 100644 app/assets/stylesheets/client/home.css.scss create mode 100644 app/assets/stylesheets/client/notify.css.scss create mode 100644 app/assets/stylesheets/client/session.css.scss create mode 100644 app/assets/stylesheets/client/sidebar.css.scss create mode 100644 app/views/layouts/hold diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..8192e9d510b2f020f2205dc089c8ab1dcdcc66a7 GIT binary patch literal 6047 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 literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/layout.js b/app/assets/javascripts/layout.js index d1f403fed..715e0955b 100644 --- a/app/assets/javascripts/layout.js +++ b/app/assets/javascripts/layout.js @@ -33,10 +33,10 @@ notifyGutter: 10, collapsedSidebar: 30, panelHeaderHeight: 48, - gutter: 20, // Margin around the whole UI - screenMargin: 20, // Margin around screens (not headers/sidebar) + gutter: 60, // Margin around the whole UI + screenMargin: 0, // Margin around screens (not headers/sidebar) gridOuterMargin: 6, // Outer margin on Grids (added to screenMargin if screen) - gridPadding: 4, // Padding around grid cells. Added to outer margin. + gridPadding: 8, // Padding around grid cells. Added to outer margin. animationDuration: 400 }; diff --git a/app/assets/stylesheets/client/common.css.scss b/app/assets/stylesheets/client/common.css.scss index 6b9f53dad..5060b5793 100644 --- a/app/assets/stylesheets/client/common.css.scss +++ b/app/assets/stylesheets/client/common.css.scss @@ -2,6 +2,14 @@ * Variables used across files */ +$ColorUIBackground: #323232; /* Dark Grey */ +$ColorScreenPrimary: #f34e1d; /* Orange */ +$ColorElementPrimary: #007985; /* Teal */ +$ColorText: #ffffff; /* White */ +$ColorLink: #9ec030; /* Lime */ +$ColorScreenBackground: lighten($ColorUIBackground, 10%); + + $color1: #006AB6; /* mid blue */ $color2: #9A9084; /* warm gray */ $color3: #B11254; /* magenta */ diff --git a/app/assets/stylesheets/client/dialog.css.scss b/app/assets/stylesheets/client/dialog.css.scss new file mode 100644 index 000000000..e396b6af3 --- /dev/null +++ b/app/assets/stylesheets/client/dialog.css.scss @@ -0,0 +1,25 @@ +@import "client/common.css.scss"; + +.dialog { + display:none; + background-color:$ColorElementPrimary; + border: #666; + color:#000; + min-width: 400px; + min-height: 350px; +} + +.dialog a { + color: $color1; +} + +.dialog h1 { + font-weight: bold; + font-size: 150%; + margin: 12px; +} +.dialog .panel { + background-color: shade($ColorElementPrimary, 6%); + margin:12px; + padding: 12px; +} diff --git a/app/assets/stylesheets/client/footer.css.scss b/app/assets/stylesheets/client/footer.css.scss new file mode 100644 index 000000000..bce0eb0c1 --- /dev/null +++ b/app/assets/stylesheets/client/footer.css.scss @@ -0,0 +1,24 @@ +@import "client/common.css.scss"; + +.footer { + position: absolute; + bottom:10px; + left: 0px; + width: 100%; + color:$ColorText; + margin: 0px 0px 30px 60px; +} + +.footer p { + font-size: 80%; + margin:3px; +} + +.footer p.left { + float:left; +} + +.footer p.right { + float:right; + margin-right: 120px; +} diff --git a/app/assets/stylesheets/client/header.css.scss b/app/assets/stylesheets/client/header.css.scss new file mode 100644 index 000000000..d365ff5bf --- /dev/null +++ b/app/assets/stylesheets/client/header.css.scss @@ -0,0 +1,51 @@ +@import "compass/utilities/text/replacement"; +@import "client/common.css.scss"; + +div[layout="header"] h1 { + width: 252px; + height:47px; + @include replace-text(image-url("logo.png")); +} + +/*.header h1 {*/ + /*margin:22px;*/ + /*font-size:300%;*/ + /*font-family: 'LatoLight', Arial, sans-serif;*/ +/*}*/ + +.userinfo { + position:absolute; + right:0px; + top:0px; + width: 266px; + z-index:5; +} +.userinfo img.avatar { + float:left; +} +.userinfo .username { + float:left; + margin-top: 18px; + cursor: pointer; +} +.userinfo h2 { + font-size:120%; + font-weight: bold; + float:left; + margin-right:4px; +} +.userinfo .profile-toggle { + display:inline-block; +} +.userinfo ul { + clear:both; + background: $color7; + display:none; +} +.userinfo li { + display:block; + margin: 2px; + padding: 2px; + background: scale-lightness($color7, 10%); +} + diff --git a/app/assets/stylesheets/client/home.css.scss b/app/assets/stylesheets/client/home.css.scss new file mode 100644 index 000000000..dde79855f --- /dev/null +++ b/app/assets/stylesheets/client/home.css.scss @@ -0,0 +1,23 @@ +@import "compass/css3/images"; +@import "compass/css3/background-size"; +@import "client/common.css.scss"; + +.homecard { + cursor:pointer; + background-color: shade($ColorScreenPrimary, 10%); + border: 1px solid $translucent1; +} +.homecard h2 { + background-color: $ColorScreenPrimary; + margin: 0px; + padding: 3px; + text-align:right; + font-size:150%; + font-weight: 300; + font-family: 'LatoLight', Arial, sans-serif; +} + +.homecard.hover { + border: 1px solid $translucent2 !important; +} + diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss index bdc1311ad..90d4e6fd2 100644 --- a/app/assets/stylesheets/client/jamkazam.css.scss +++ b/app/assets/stylesheets/client/jamkazam.css.scss @@ -11,21 +11,17 @@ @import "client/common.css.scss"; body { - color: $text; - /* - @include background-image( - linear-gradient(top, $color7, scale-lightness($color7, 30%))); - */ - background-color: shade($color7, 10%); + color: $ColorText; + background-color: $ColorUIBackground; width: 100%; - height: 1200px; + height: 100%; overflow: hidden; font-family: 'LatoRegular', Arial, sans-serif; } a { cursor:pointer; - color: $link; + color: $ColorLink; } a:hover { @@ -81,90 +77,13 @@ label { background-color: shade($color7, 10%); } -.notify { - display:none; - background-color: $color8; - color:#000; - overflow:auto; -} -.notify a { - color:#000; - font-weight:bold; -} - -.dialog { - display:none; - background-color:$color8; - border: #666; - color:#000; - min-width: 400px; - min-height: 350px; -} - -.dialog a { - color: $color1; -} - -.dialog h1 { - font-weight: bold; - font-size: 150%; - margin: 12px; -} -.dialog .panel { - background-color: shade($color8, 6%); - margin:12px; - padding: 12px; -} - - - -.header h1 { - margin:22px; - font-size:300%; - font-family: 'LatoLight', Arial, sans-serif; -} - -.userinfo { - position:absolute; - right:0px; - top:0px; - width: 266px; - z-index:5; -} -.userinfo img.avatar { - float:left; -} -.userinfo .username { - float:left; - margin-top: 18px; - cursor: pointer; -} -.userinfo h2 { - font-size:120%; - font-weight: bold; - float:left; - margin-right:4px; -} -.userinfo .profile-toggle { - display:inline-block; -} -.userinfo ul { - clear:both; - background: $color7; - display:none; -} -.userinfo li { - display:block; - margin: 2px; - padding: 2px; - background: scale-lightness($color7, 10%); -} - .screen { display:none; } .screen.secondary { + border: 1px solid $ColorScreenPrimary; + background-color:$ColorScreenBackground; } .buttonrow, .screen.secondary .footer { position: absolute; @@ -196,109 +115,6 @@ label { font-weight: bold; } -.homecard { - cursor:pointer; - border: 1px solid $translucent1; -} -.homecard h2 { - position:absolute; - bottom:0px; - margin: 18px; - font-size:240%; - font-weight: 300; - font-family: 'LatoLight', Arial, sans-serif; -} - -.homecard.hover { - border: 1px solid $translucent2 !important; -} - -.homecard.createsession { - background-color: $color10; - @include background-image( - linear-gradient(bottom left, $color10, scale-lightness($color10, $gradient-diff))); -} -.homecard.findsession { - background-color: $color6; - @include background-image( - linear-gradient(bottom left, $color6, scale-lightness($color6, $gradient-diff))); -} -.homecard.practice { - background-color: $color9; - @include background-image( - linear-gradient(bottom left, $color9, scale-lightness($color9, $gradient-diff))); -} -.homecard.bands { - background-color: $color1; - @include background-image( - linear-gradient(bottom left, $color1, scale-lightness($color1, $gradient-diff))); -} -.homecard.recordings { - background-color: $color5; - @include background-image( - linear-gradient(bottom left, shade($color5, $gradient-diff), $color5)); -} - -.sidebar { - background-color: rgba($color8, 0.1); -} -.sidebar .panel-header { - background-color: rgba(#fff, 0.2); -} -.sidebar h2 { - padding: 12px; - font-size: 180%; - font-family: LatoLight, Arial, sans-serif; -} -.sidebar .expander { - cursor:pointer; - background-color: $color8; - color: $color12; -} -.sidebar .expander p { - font-size: 100%; - font-weight: bold; - font-family: LatoBold, Arial, sans-serif; - padding: 8px; -} -.sidebar li { - position: relative; - height: 48px; - line-height:48px; - background-color: rgba($color8, 0.1); - margin: 4px 0px 4px 24px; -} -.sidebar li.offline { - color: shade($text, 40%); -} -.sidebar li img { - margin: 8px; - float:left; -} -.sidebar .name { - display:block; - position:absolute; - line-height: 18px; - height: 18px; - left: 48px; - top: 10px; - font-weight: bold; - font-family: LatoBold, Arial, sans-serif; - font-size:110%; -} - -.sidebar .status { - display:block; - position:absolute; - line-height:12px; - height: 12px; - left: 48px; - top: 26px; - font-style: italic; - font-family: LatoItalic, Arial, sans-serif; - font-size: 100%; -} - .avatar { display: block; float:left; @@ -322,8 +138,8 @@ label { /* TODO - generalize */ .instrument, .invitation { margin: 1px; - background: $color8; - color:#000; + background: $ColorElementPrimary; + color:$ColorText; padding: 3px; width:auto; float:left; @@ -342,8 +158,8 @@ label { /* Autocomplete */ .autocomplete { border:1px solid #999; - background:$color8; - color:#000; + background:$ColorElementPrimary; + color:$ColorText; cursor:default; text-align:left; max-height:350px; @@ -360,51 +176,4 @@ label { .autocomplete strong { font-weight:normal; color:#3399FF; } -/* Session Tracks */ -.session-track { - width: 125px; - height: 300px; - border: 1px solid #fff; - position:relative; - float:left; -} -.session-track [track-role] { margin:4px; } -.session-track .latency { text-align:center; } -.session-track .latency.good { color:#00ff00; } -.session-track .latency.medium { color:#ffff00; } -.session-track .latency.bad { color:#ff0000; } - -.session-track .mute { - background-color:#bbb; color:#000; - position: absolute; - bottom: 80px; - width: 117px; - text-align: center; -} - -.session-track .name { - background-color:#ddd; color:#000; - position: absolute; - bottom: 60px; - width: 117px; - text-align: center; -} -.session-track .part { - background-color:#fff; color:#000; - position: absolute; - bottom: 40px; - width: 117px; - text-align: center; -} - -.session-track .avatar { - position:absolute; - width: 32px; - height: 32px; - bottom:4px; - left: 46px; -} -.session-track .avatar img { - width: 32px; height: 32px; -} diff --git a/app/assets/stylesheets/client/notify.css.scss b/app/assets/stylesheets/client/notify.css.scss new file mode 100644 index 000000000..6feaebd7c --- /dev/null +++ b/app/assets/stylesheets/client/notify.css.scss @@ -0,0 +1,11 @@ +@import "client/common.css.scss"; + +.notify { + display:none; + background-color: $ColorElementPrimary; + color:$ColorText; + overflow:auto; +} +.notify a { + font-weight:bold; +} diff --git a/app/assets/stylesheets/client/session.css.scss b/app/assets/stylesheets/client/session.css.scss new file mode 100644 index 000000000..ca24110a9 --- /dev/null +++ b/app/assets/stylesheets/client/session.css.scss @@ -0,0 +1,49 @@ +@import "client/common.css.scss"; + +/* Session Tracks */ +.session-track { + width: 125px; + height: 300px; + border: 1px solid #fff; + position:relative; + float:left; +} +.session-track [track-role] { margin:4px; } +.session-track .latency { text-align:center; } +.session-track .latency.good { color:#00ff00; } +.session-track .latency.medium { color:#ffff00; } +.session-track .latency.bad { color:#ff0000; } + +.session-track .mute { + background-color:#bbb; color:#000; + position: absolute; + bottom: 80px; + width: 117px; + text-align: center; +} + +.session-track .name { + background-color:#ddd; color:#000; + position: absolute; + bottom: 60px; + width: 117px; + text-align: center; +} +.session-track .part { + background-color:#fff; color:#000; + position: absolute; + bottom: 40px; + width: 117px; + text-align: center; +} + +.session-track .avatar { + position:absolute; + width: 32px; + height: 32px; + bottom:4px; + left: 46px; +} +.session-track .avatar img { + width: 32px; height: 32px; +} diff --git a/app/assets/stylesheets/client/sidebar.css.scss b/app/assets/stylesheets/client/sidebar.css.scss new file mode 100644 index 000000000..9d4c76b00 --- /dev/null +++ b/app/assets/stylesheets/client/sidebar.css.scss @@ -0,0 +1,67 @@ +@import "client/common.css.scss"; + +.sidebar { + background-color: $ColorElementPrimary; +} +.sidebar .panel-header { + background-color: shade($ColorElementPrimary, 10); +} +.sidebar h2 { + padding: 12px; + font-size: 180%; + font-family: LatoLight, Arial, sans-serif; +} +.sidebar .expander { + cursor:pointer; + background-color:$ColorUIBackground; + color: $ColorElementPrimary; +} +.sidebar .expander p { + text-align:right; + font-size: 100%; + font-weight: bold; + font-family: LatoBold, Arial, sans-serif; + padding: 8px; +} +.sidebar .expander p span { + padding: 0px 4px; + margin: 0px 2px; + background-color: $ColorElementPrimary; + color: lighten($ColorElementPrimary, 15); +} +.sidebar li { + position: relative; + height: 48px; + line-height:48px; + margin: 4px 0px 4px 24px; +} +.sidebar li.offline { + color: shade($text, 40%); +} +.sidebar li img { + margin: 8px; + float:left; +} +.sidebar .name { + display:block; + position:absolute; + line-height: 18px; + height: 18px; + left: 48px; + top: 10px; + font-weight: bold; + font-family: LatoBold, Arial, sans-serif; + font-size:110%; +} + +.sidebar .status { + display:block; + position:absolute; + line-height:12px; + height: 12px; + left: 48px; + top: 26px; + font-style: italic; + font-family: LatoItalic, Arial, sans-serif; + font-size: 100%; +} diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb index 55f293a7b..a97287a30 100644 --- a/app/views/clients/index.html.erb +++ b/app/views/clients/index.html.erb @@ -8,6 +8,17 @@

or Sign In

+
+

+ Copyright © 2012 JamKazam, Inc. All Rights Reserved. +

+

+ contact | + terms fo use | + privacy +

+
+