improving base theme

This commit is contained in:
Sacha Greif 2014-08-20 15:59:11 +09:00
parent b121a2da2d
commit d7135c1d1d
35 changed files with 746 additions and 661 deletions

View file

@ -1,9 +1,9 @@
<template name="settings">
<div class="grid-small grid-block dialog settings">
{{#if this.hasSettings}}
{{> quickForm collection="Settings" id="updateSettingsForm" type="update" doc=this.settings }}
{{> quickForm collection="Settings" id="updateSettingsForm" type="update" doc=this.settings template="bootstrap3-horizontal" label-class="control-label" input-col-class="controls"}}
{{else}}
{{> quickForm collection="Settings" id="updateSettingsForm" type="insert"}}
{{> quickForm collection="Settings" id="updateSettingsForm" type="insert" template="bootstrap3-horizontal" label-class="control-label" input-col-class="controls"}}
{{/if}}
</div>
</template>

View file

@ -4,19 +4,19 @@
<a id="mobile-menu" href="#menu" class="mobile mobile-button menu mobile-menu-button"><i class="icon-menu"></i><span>{{i18n "Menu"}}</span></a>
{{#if logo_url}}
<h1 class="logo logo-image">
<h1 class="logo logo-image header-module">
<a href="/">
<img src="{{logo_url}}" alt="{{site_title}}"/>
</a>
</h1>
{{else}}
<h1 class="logo"><a href="/">{{site_title}}</a></h1>
<h1 class="logo header-module"><a href="/">{{site_title}}</a></h1>
{{/if}}
{{#if hasPrimaryNav}}
<ul class="nav primary-nav desktop-nav {{dropdownClass}}">
<ul class="nav primary-nav desktop-nav {{dropdownClass}} header-module desktop-only">
{{#each primaryNav}}
<li>
<li class="header-submodule">
{{> UI.dynamic template=getTemplate}}
</li>
{{/each}}
@ -24,9 +24,9 @@
{{/if}}
{{#if hasSecondaryNav}}
<ul class="nav secondary-nav desktop-nav {{dropdownClass}}">
<ul class="nav secondary-nav desktop-nav {{dropdownClass}} header-module desktop-only">
{{#each secondaryNav}}
<li>
<li class="header-submodule">
{{> UI.dynamic template=getTemplate}}
</li>
{{/each}}

View file

@ -2,7 +2,7 @@
{{#if isLoggedIn}}
<div class="user-menu dropdown">
<a class="view dropdown-top-level" href="/">{{name}}</a>
<div class="dropdown-menu dropdown-left">
<div class="dropdown-menu">
<ul role="menu" aria-labelledby="dLabel">
<li><a href="{{profileUrl}}">{{i18n "Profile"}}</a></li>
<li><a href="/account">{{i18n "Edit Account"}}</a></li>

View file

@ -1,5 +1,5 @@
<template name="postActions">
<a class="toggle-actions-link" href="#">
<a class="toggle-actions-link mobile-only" href="#">
<span class="action"></span>
</a>
</template>

View file

@ -1,7 +1,7 @@
<template name="postUpvote">
<div class="post-rank"><span>{{oneBasedRank}}</span></div>
{{#if upvoted}}
<span class="upvote-link voted"><i class="icon-check"></i><span>{{i18n "Upvote"}}</span></span>
<span class="upvote-link voted"><i class="icon-check"></i><span>{{i18n "Upvoted"}}</span></span>
{{else}}
<a class="upvote-link not-voted" href="#"><i class="icon-up"></i><span>{{i18n "Upvote"}}</span></a>
{{/if}}

View file

@ -6,9 +6,7 @@
{{/each}}
</div>
{{#if hasMorePosts}}
<div class="more-button module">
<a href="{{loadMoreUrl}}">{{i18n "Load more"}}</a>
</div>
<a class="more-button module" href="{{loadMoreUrl}}"><span>{{i18n "Load more"}}</span></a>
{{/if}}
</div>
</template>

View file

@ -7,7 +7,7 @@ settingsSchemaObject = {
siteUrl: {
type: String,
optional: true,
label: 'Site URL (include trailing slash)'
label: 'Site URL (with trailing "/")'
},
tagline: {
type: String,

View file

@ -140,7 +140,7 @@ i18n.translations.en = {
"Sign Up": "Sign Up",
"Please fill in all fields": "Please fill in all fields",
"Invite ": "Invite ",
"left": " restante",
"left": " left",
"Invite (none left)": "Invite (none left)",
"All": "All",
"Invited": "Invited",

View file

@ -1,3 +1,6 @@
.mobile-nav .search{
padding: 10px;
}
.search-field{
color: #4a4444;
}

File diff suppressed because it is too large Load diff

View file

@ -13,11 +13,20 @@ form, .accounts-dialog{
@include cf;
margin-bottom:$grid-padding;
>label{
float:left;
margin-right:10px;
font-weight: bold;
display: block;
@include small{
margin-bottom: 5px;
}
@include medium-large{
float:left;
margin-right:10px;
}
}
.controls{
margin-left:150px;
@include medium-large{
margin-left: 200px;
}
position:relative;
.inline-link{
position:absolute;
@ -52,13 +61,13 @@ form, .accounts-dialog{
margin-bottom:10px;
}
}
.form-actions{
.form-actions, .form-group{
@include cf;
a{
float:left;
display:block;
}
.button{
.button, .btn{
float: right;
}
}
@ -126,6 +135,9 @@ input[type="submit"], button, .button, .btn{
display: inline-block;
}
}
input[type="search"]{
font-size:14px;
}
.twitter-signup{
margin-bottom:20px;
padding-bottom:20px;

View file

@ -0,0 +1,10 @@
a{
text-decoration: none;
&, &:link, &:visited, &:active{
color: $text;
font-weight: bold;
}
&:hover{
color: $red;
}
}

View file

@ -0,0 +1,65 @@
.hidden{
display:none;
}
.visible{
display: block;
}
.overlay{
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:50;
}
#spinner{
margin: 100px 0;
}
.debug{
display:none;
}
.footer{
text-align:center;
padding:10px 0 70px 0;
color:black(0.4);
font-size:14px;
&.absolute{
position:absolute;
}
}
#login-buttons .loading{
display:none;
}
#loading, .loading-page{
height:300px;
}
.module{
background: white;
margin-bottom: $grid-margin;
padding: $grid-padding;
}
.notifications-toggle{
background: white;
margin-bottom: $grid-margin;
padding: $grid-padding;
}
.search-date-header{
background: $lightest-grey;
th{
@include cf;
}
.search-date{
display: block;
float: left;
font-weight: bold;
}
.search-count{
font-size: 13px;
display: block;
float: right;
}
}

View file

@ -0,0 +1,23 @@
table{
width: 100%;
tr{
border-bottom: 1px solid #eee;
td, th{
padding:10px;
}
}
thead{
tr{
td, th{
font-weight:bold;
}
}
}
tbody{
tr{
td{
}
}
}
}

View file

@ -0,0 +1,21 @@
html, body, input, button{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5, ul, ol, li, p, pre, div{
line-height: 1.5;
}
h1{
font-size: 40px;
}
h2{
font-size: 30px;
}
h3{
font-size: 20px;
}
h4{
font-size: 16px;
}
li{
margin: 0 0 10px 0;
}

View file

@ -1,5 +1,4 @@
$red: #f6431a;
$red: #f36c3d;
$red: #DD3416;
$green:#a3d06d;
$blue:#7ac0e4;
@ -15,7 +14,7 @@ $light-yellow:#fffce0;
$grey:#b5b0b0;
$lighter-grey:#dfdbdb;
$lightest-grey:#e7eff2;
$dark-grey:#4a4444;
$dark-grey:#444444;
$header-bg:$dark-grey;
$text:$dark-grey;

View file

@ -1,17 +0,0 @@
.hidden{
display:none;
}
.visible{
display: block;
}
.overlay{
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:50;
}
a, a:link, a:visited, a:hover, a:active{
text-decoration: none;
}

View file

@ -1,106 +0,0 @@
.header{
background: white;
margin-bottom: $grid-margin;
padding: $grid-padding;
&, a, a:link, a:visited{
color: white;
}
}
.logo-image{
a, img{
display: block;
height: 100%;
width: 100%;
}
}
ul{
li{
margin: 0 0 10px 0;
}
}
.module{
background: white;
margin-bottom: $grid-margin;
padding: $grid-padding;
}
.notifications-toggle{
background: white;
margin-bottom: $grid-margin;
padding: $grid-padding;
}
.filter-sort{
@include cf;
padding: $grid-padding;
background: black(0.05);
a, span{
display: inline-block;
margin-right: 20px;
&.active{
border-bottom: 2px solid $blue;
}
&:last-child{
margin-right: 0;
}
}
.filter{
float: left;
}
.sort{
float: right;
}
}
.user-list, .user-table{
font-size: 13px;
.user{
.user-avatar{
height:30px;
width:30px;
background-size: 30px 30px;
display:block;
@include border-radius(30px);
}
.posts-list{
}
}
}
table{
width: 100%;
tr{
border-bottom: 1px solid #eee;
td, th{
padding:10px;
}
}
thead{
tr{
td, th{
font-weight:bold;
}
}
}
tbody{
tr{
td{
}
}
}
}
.search-date-header{
background: $lightest-grey;
th{
@include cf;
}
.search-date{
display: block;
float: left;
font-weight: bold;
}
.search-count{
font-size: 13px;
display: block;
float: right;
}
}

View file

@ -1,61 +0,0 @@
*, *:before, *:after {
@include box-sizing(border-box);
line-height: 1.5;
}
html, body, .outer-wrapper{
height:100%;
}
body{
background:#e0f1f7;
font-size: 14px;
@include small{
overflow-x: hidden;
}
}
html, body, input, button{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5){
body{
// background:#e9f3f7 url("/img/bg@2x.png") top center;
background-size:10px 10px;
}
}
.outer-wrapper{
position:relative;
}
.content-wrapper{
padding-bottom:20px;
}
#spinner{
margin: 100px 0;
}
.debug{
display:none;
}
.footer{
text-align:center;
padding:10px 0 70px 0;
color:black(0.4);
font-size:14px;
&.absolute{
position:absolute;
}
}
#login-buttons .loading{
display:none;
}
#loading, .loading-page{
height:300px;
}
.content-wrapper{
padding: 0 10px;
@include small{
overflow-x: hidden;
overflow-y: hidden;
}
}

View file

@ -1,15 +0,0 @@
h1,h2,h3,h4,h5{
line-height: 1.3;
}
h1{
font-size: 40px;
}
h2{
font-size: 30px;
}
h3{
font-size: 20px;
}
h4{
font-size: 16px;
}

View file

@ -1,14 +1,29 @@
@import "compass/reset";
// @import "global/normalize";
@import "compass/css3";
@import "partials/colors";
@import "partials/mixins";
@import "partials/breakpoints";
@import "partials/forms";
@import "partials/common";
@import "partials/main";
@import "partials/mobile_nav";
@import "partials/typography";
@import "partials/elements";
@import "partials/dropdown";
@import "partials/markdown";
// Includes
@import "includes/breakpoints";
@import "includes/colors";
@import "includes/mixins";
// Global Styles (forms, typography, etc.)
@import "global/forms";
@import "global/links";
@import "global/main";
@import "global/markdown";
@import "global/tables";
@import "global/typography";
// Specific Styles (header, posts, etc.)
@import "specific/dropdown";
@import "specific/header";
@import "specific/layout";
@import "specific/mobile_nav";
@import "specific/notifications";
@import "specific/posts";
@import "specific/users";

View file

@ -17,10 +17,6 @@
position:absolute;
padding-top:20px;
z-index: 10000;
&.dropdown-left{
left:auto;
right: 10px;
}
&, a, a:link, a:visited{
color: $text;
}
@ -30,6 +26,7 @@
min-width:140px;
@include border-radius(3px);
@include box-shadow(0 1px 3px black(0.35));
list-style-type: none;
li{
margin-bottom: 0;
a{

View file

@ -0,0 +1,38 @@
.header{
background: $dark-grey;
margin-bottom: $grid-margin;
padding: $grid-padding;
@include cf;
&, a, a:link, a:visited{
color: white;
}
.nav{
list-style-type: none;
li{
margin-bottom: 0;
}
}
.header-module, .header-submodule{
display: inline-block;
margin-right: 20px;
&:last-child{
margin-right: 0px;
}
}
}
.logo{
vertical-align: middle;
line-height: 1;
@include small{
font-size: 24px;
text-align: center;
display: block;
}
}
.logo-image{
a, img{
display: block;
height: 100%;
width: 100%;
}
}

View file

@ -0,0 +1,32 @@
*, *:before, *:after {
@include box-sizing(border-box);
line-height: 1.5;
}
html, body, .outer-wrapper{
height:100%;
}
body{
background:#eee;
font-size: 14px;
@include small{
overflow-x: hidden;
}
}
.outer-wrapper{
position:relative;
}
.content-wrapper{
padding-bottom:20px;
}
.content-wrapper{
padding: 0 10px;
max-width: 1000px;
margin: 0 auto;
@include small{
overflow-x: hidden;
overflow-y: hidden;
}
}

View file

@ -1,5 +1,16 @@
$mobile-nav-width: 200px;
.mobile-only{
@include medium-large{
display: none !important;
}
}
.desktop-only{
@include small{
display: none !important;
}
}
.mobile-nav{
position:fixed;
overflow:auto;

View file

@ -0,0 +1,3 @@
.more-button{
display: block;
}

View file

@ -0,0 +1,37 @@
.user-list, .user-table{
font-size: 13px;
.user{
.user-avatar{
height:30px;
width:30px;
background-size: 30px 30px;
display:block;
@include border-radius(30px);
}
.posts-list{
}
}
}
.filter-sort{
@include cf;
padding: $grid-padding;
background: black(0.05);
a, span{
display: inline-block;
margin-right: 20px;
&.active{
border-bottom: 2px solid $blue;
}
&:last-child{
margin-right: 0;
}
}
.filter{
float: left;
}
.sort{
float: right;
}
}

View file

@ -2,62 +2,6 @@
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 5, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
/* line 22, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
/* line 24, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none; }
/* line 26, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
/* line 28, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 30, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
/* line 103, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
/* line 32, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../../../Applications/CodeKit.app/Contents/Resources/engines/compass/compass-core/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
/* line 35, ../scss/partials/_grid.scss */
.content-wrapper {
padding: 0 10px; }
@ -445,6 +389,11 @@ em {
.search.empty .search-clear {
display: none; }
/* line 114, ../scss/modules/_nav.scss */
.has-dropdown .user-menu .dropdown-menu {
left: auto;
right: 10px; }
/* line 1, ../scss/modules/_posts.scss */
.module {
border-radius: 3px; }

View file

@ -110,3 +110,8 @@
}
}
}
.has-dropdown .user-menu .dropdown-menu{
left:auto;
right: 10px;
}

View file

@ -3,7 +3,7 @@
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";
// @import "compass/reset";
@import "compass/css3";
@import "compass/typography/lists/horizontal-list";

View file

@ -1 +1 @@
themeSettings.useDropdowns = true; // not strictly needed since "true" is the current default
themeSettings.useDropdowns = true; // not strictly needed since "true" is the current default