seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Start reorg of stylesheets in anticipation of visual changes.

This commit is contained in:
Jonathon Wilson 2012-11-22 12:36:43 -07:00
parent 3ec77849a9
commit 9983410594
15 changed files with 294 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

6
app/assets/javascripts/layout.js
View File

@ -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
};

8
app/assets/stylesheets/client/common.css.scss
View File

@ -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 */

25
app/assets/stylesheets/client/dialog.css.scss Normal file
View File

@ -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;
}

24
app/assets/stylesheets/client/footer.css.scss Normal file
View File

@ -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;
}

51
app/assets/stylesheets/client/header.css.scss Normal file
View File

@ -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%);
}

23
app/assets/stylesheets/client/home.css.scss Normal file
View File

@ -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;
}

251
app/assets/stylesheets/client/jamkazam.css.scss
View File

@ -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;
}

11
app/assets/stylesheets/client/notify.css.scss Normal file
View File

@ -0,0 +1,11 @@
@import "client/common.css.scss";
.notify {
display:none;
background-color: $ColorElementPrimary;
color:$ColorText;
overflow:auto;
}
.notify a {
font-weight:bold;
}

49
app/assets/stylesheets/client/session.css.scss Normal file
View File

@ -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;
}

67
app/assets/stylesheets/client/sidebar.css.scss Normal file
View File

@ -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%;
}

15
app/views/clients/index.html.erb
View File

@ -8,6 +8,17 @@
<p>or <a href="/signin">Sign In</a></p>
</div>
<div class="footer">
<p class="left">
Copyright &copy; 2012 JamKazam, Inc. All Rights Reserved.
</p>
<p class="right">
<a href="/#/contact">contact</a> |
<a href="/#/terms">terms fo use</a> |
<a href="/#/privacy">privacy</a>
</p>
</div>
<!-- Normal signed-in user content -->
<div layout="header" class="header" style="display:none;">
<h1>Jamkazam</h1>
@ -78,10 +89,10 @@
<div layout="sidebar" class="sidebar" style="display:none;">
<div layout-sidebar-expander="visible" class="expander visible">
<p>&gt;&gt; Hide</p>
<p>Hide <span>&gt;&gt;</span></p>
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
<p>&lt;&lt;</p>
<p><span>&lt;&lt;</span></p>
</div>
<div layout="panel" layout-id="panel1">
<div layout-panel="collapsed">

8
app/views/layouts/client.html.erb
View File

@ -5,8 +5,16 @@
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"/>
<![endif]-->
<%= stylesheet_link_tag "client/ie", media: "all" %>
<%= stylesheet_link_tag "client/jamkazam", media: "all" %>
<%= stylesheet_link_tag "client/header", media: "all" %>
<%= stylesheet_link_tag "client/footer", media: "all" %>
<%= stylesheet_link_tag "client/notify", media: "all" %>
<%= stylesheet_link_tag "client/dialog", media: "all" %>
<%= stylesheet_link_tag "client/sidebar", media: "all" %>
<%= stylesheet_link_tag "client/home", media: "all" %>
<%= stylesheet_link_tag "client/session", media: "all" %>
<%= stylesheet_link_tag "client/search", media: "all" %>
<%= stylesheet_link_tag "client/lato", media: "all" %>
<%= include_gon %>

0
app/views/layouts/hold Normal file
View File

4
spec/javascripts/layout.spec.js
View File

@ -15,8 +15,8 @@
it("sidebarWidth should be 300", function() {
expect(layout.getOpts().sidebarWidth).toEqual(300);
});
it("gutter should be 20", function() {
expect(layout.getOpts().gutter).toEqual(20);
it("gutter should be 60", function() {
expect(layout.getOpts().gutter).toEqual(60);
});
});
describe("override one default", function() {