improving base theme

client/views/admin/settings.html

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

client/views/nav/nav.html

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

client/views/nav/user_menu.html

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

client/views/posts/modules/post_actions.html

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

client/views/posts/modules/post_upvote.html

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

client/views/posts/posts_list.html

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

collections/settings.js

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

lib/locales/en.js

@@ -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",

packages/telescope-search/lib/client/css/search.css

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

packages/telescope-theme-base/lib/client/scss/global/_forms.scss

@@ -13,11 +13,20 @@ form, .accounts-dialog{
     @include cf;
     margin-bottom:$grid-padding;
     >label{
-      float:left;
+      font-weight: bold;
-      margin-right:10px;
+      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;

packages/telescope-theme-base/lib/client/scss/global/_links.scss

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

packages/telescope-theme-base/lib/client/scss/global/_main.scss

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

packages/telescope-theme-base/lib/client/scss/global/_tables.scss

@@ -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{
+        
+      }     
+    }
+  }
+}

packages/telescope-theme-base/lib/client/scss/global/_typography.scss

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

packages/telescope-theme-base/lib/client/scss/includes/_colors.scss

@@ -1,5 +1,4 @@
-$red: #f6431a;
+$red: #DD3416;
-$red: #f36c3d;
 $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;

packages/telescope-theme-base/lib/client/scss/partials/_common.scss

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

packages/telescope-theme-base/lib/client/scss/partials/_elements.scss

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

packages/telescope-theme-base/lib/client/scss/partials/_main.scss

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

packages/telescope-theme-base/lib/client/scss/partials/_typography.scss

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

packages/telescope-theme-base/lib/client/scss/screen.scss

@@ -1,14 +1,29 @@
 @import "compass/reset";
+// @import "global/normalize";
+
 @import "compass/css3";
 
-@import "partials/colors";
+// Includes
-@import "partials/mixins";
+
-@import "partials/breakpoints";
+@import "includes/breakpoints";
-@import "partials/forms";
+@import "includes/colors";
-@import "partials/common";
+@import "includes/mixins";
-@import "partials/main";
+
-@import "partials/mobile_nav";
+// Global Styles (forms, typography, etc.)
-@import "partials/typography";
+
-@import "partials/elements";
+@import "global/forms";
-@import "partials/dropdown";
+@import "global/links";
-@import "partials/markdown";
+@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";

packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss

@@ -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{

packages/telescope-theme-base/lib/client/scss/specific/_header.scss

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

packages/telescope-theme-base/lib/client/scss/specific/_layout.scss

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

packages/telescope-theme-base/lib/client/scss/specific/_mobile_nav.scss

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

packages/telescope-theme-base/lib/client/scss/specific/_posts.scss

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

packages/telescope-theme-base/lib/client/scss/specific/_users.scss

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

packages/telescope-theme-hubble/lib/client/css/screen.css

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

packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss

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

packages/telescope-theme-hubble/lib/client/scss/screen.scss

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

packages/telescope-theme-hubble/lib/hubble.js

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