Mercurial > wikked
changeset 173:bf2c79779800
Working on a better Wikked theme.
| author | Ludovic Chabant <ludovic@chabant.com> |
|---|---|
| date | Tue, 28 Jan 2014 08:17:39 -0800 |
| parents | 27492ea65657 |
| children | 298b9f5ccdac |
| files | wikked/assets/css/custom-variables.less wikked/assets/css/wikked/alerts.less wikked/assets/css/wikked/base.less wikked/assets/css/wikked/main.less wikked/assets/css/wikked/page.less wikked/assets/js/wikked.js wikked/assets/js/wikked/models.js wikked/assets/tpl/footer.html wikked/assets/tpl/nav.html wikked/assets/tpl/read-page.html wikked/assets/tpl/special-nav.html wikked/templates/index-dev.html wikked/templates/index.html |
| diffstat | 13 files changed, 190 insertions(+), 73 deletions(-) [+] |
line wrap: on
line diff
--- a/wikked/assets/css/custom-variables.less Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/css/custom-variables.less Tue Jan 28 08:17:39 2014 -0800 @@ -8,6 +8,17 @@ @body-bg: #fff; @text-color: @gray-dark; -@font-size-base: 18px; -//@line-height-base: (@font-size-base * 1.5); +@font-size-base: 20px; +@line-height-base: 1.5; +@line-height-computed: floor(@font-size-base * @line-height-base); +@font-family-serif: Georgia,Cambria,"Times New Roman",Times,serif; +@font-family-sans-serif: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif; +@font-family-base: @font-family-serif; + +@headings-font-family: @font-family-sans-serif; +@headings-font-weight: 700; +@headings-line-height: 1.5; + +@icon-font-path: "../bootstrap/fonts/"; +
--- a/wikked/assets/css/wikked/alerts.less Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/css/wikked/alerts.less Tue Jan 28 08:17:39 2014 -0800 @@ -39,11 +39,11 @@ text-shadow: 0 0 0.5em rgba(1, 1, 1, 0.2); } .ribbon { - .makeRibbon(lighten(@colorOrange, 10%)); + .makeRibbon(lighten(@color-orange, 10%)); float: right; .ribbon-inner { - .makeRibbonContent(@colorOrange, @colorPage); + .makeRibbonContent(@color-orange, #fff); a { color: #fff; text-decoration: none; } } }
--- a/wikked/assets/css/wikked/base.less Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/css/wikked/base.less Tue Jan 28 08:17:39 2014 -0800 @@ -1,13 +1,13 @@ // Constants -@colorBlue: #0F1FFF; -@colorBlueDark: #1D3982; -@colorOrange: #B03500; -@colorGreen: #B6CC95; -@colorGreenDark: #496B15; -@colorPage: #FFFFFF; -@colorFooter: #E5E7FF; -@colorCode: #523C37; +@color-blue: #0F1FFF; +@color-blue-dark: #1D3982; +@color-orange: #B03500; +@color-green: #B6CC95; +@color-green-dark: #496B15; +@color-footer: rgb(220, 220, 220); +@color-footer-dark: rgb(170, 170, 170); +@color-code: #523C37; // Macros
--- a/wikked/assets/css/wikked/main.less Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/css/wikked/main.less Tue Jan 28 08:17:39 2014 -0800 @@ -1,25 +1,35 @@ // Main tags body { - background: url('../img/gray_jean.png'); - //background-image: url(http://basehold.it/i/27); + //background: url('../img/gray_jean.png'); + color: rgb(50, 50, 50); } // Global classes a { text-decoration: none; - color: @colorBlue; - &:link { color: @colorBlue; } - &:visited { color: @colorBlue; } - &:hover { color: @colorBlue; text-decoration: underline; } - &:active { color: @colorBlue; } + color: @color-blue; + &:link { color: @color-blue; } + &:visited { color: @color-blue; } + &:hover { color: @color-blue; text-decoration: underline; } + &:active { color: @color-blue; } } a.wiki-link.missing, a.wiki-meta-link.missing { - color: @colorOrange; - &:hover { color: @colorOrange; text-decoration: underline; } + color: @color-orange; + &:hover { color: @color-orange; text-decoration: underline; } } em.hlt1 , em.hlt2, em.hlt3, em.hlt4, em.hlt5, em.hlt6 { - background: @colorGreen; + background: @color-green; } + +h1, h2, h3, h4, h5, h6 { + letter-spacing: -0.02em; + color: rgb(65, 65, 65); +} + +p { + margin: 0 0 @line-height-computed; +} +
--- a/wikked/assets/css/wikked/page.less Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/css/wikked/page.less Tue Jan 28 08:17:39 2014 -0800 @@ -1,9 +1,16 @@ + +// Article +article { + //background-image: url(http://basehold.it/i/30); + margin: 0 auto; + padding: 0 @line-height-computed; +} // Navigation & footer -.nav-wrapper>nav, -.footer-wrapper>footer { +.navbar { color: @gray-light; font-size: @font-size-small; + font-family: @font-family-sans-serif; a { text-decoration: none; @@ -14,18 +21,76 @@ &:active { color: @gray-light; } } } +// Fix Boostrap stuff we don't want. .navbar { - // Fix margin introduced by Bootstrap. - margin-bottom: 0; + //margin-bottom: 0; +} +.navbar li a { + line-height: floor(@font-size-small * @line-height-base); } .navbar-brand { // Make the first navigation link ("brand") the same size // as the rest. font-size: @font-size-small; + line-height: floor(@font-size-small * @line-height-base); +} + +.footer-wrapper { + margin: 0 auto; + padding: 0 @line-height-computed; +} +footer { + color: @color-footer-dark; + border-top: 1px solid @color-footer; + padding: @line-height-computed 0; + font-weight: 300; + font-size: @font-size-small; + font-family: @font-family-sans-serif; + letter-spacing: -0.03em; + + a { + text-decoration: none; + color: @color-footer-dark; + &:link { color: @color-footer-dark; } + &:visited { color: @color-footer-dark; } + &:hover { color: @color-green-dark; text-decoration: none; } + &:active { color: @color-footer-dark; } + } + ul { + list-type: none; + } + li { + display: inline-block; + margin: 0; + padding: 0 0.5em; + } + /*li:before { + content: '•'; + font-weight: 700; + margin: 0 0.5em; + } + li:first-child:before { + content: none; + }*/ +} + +// Page info +section.info { + margin: @line-height-computed 0 0 0; + padding: @line-height-computed 0; + border-top: 1px solid @color-footer; + + .info-categories { + color: @color-footer-dark; + font-weight: 300; + font-size: @font-size-small; + font-family: @font-family-sans-serif; + text-transform: uppercase; + } } // Main page classes -.wrapper>article { +/*.wrapper>article { .box-shadow(0 0 10px, rgb(210, 210, 210)); background: @colorPage; overflow: hidden; @@ -68,7 +133,7 @@ .rev_id { font-family: @font-family-monospace; } -} +}*/ // Search ul#search-preview { @@ -98,7 +163,7 @@ } // Page editing -#page-edit { +/*#page-edit { textarea { height: 10em; font-size: @font-size-base; @@ -122,20 +187,20 @@ width: 32px; height: 20px; } -/*#wmd-preview-wrapper { - border: 1px dashed @colorBlueDark; - - h3 { - margin: 0.5em 1em 0.5em 1em; - } - #wmd-preview { - margin: 1em; - background: none; - } -} -#wmd-button-bar li { - margin-left: 0; -}*/ +//#wmd-preview-wrapper { +// border: 1px dashed @colorBlueDark; +// +// h3 { +// margin: 0.5em 1em 0.5em 1em; +// } +// #wmd-preview { +// margin: 1em; +// background: none; +// } +//} +//#wmd-button-bar li { +// margin-left: 0; +//} .preview-wiki-meta { .meta-name { background: @colorBlueDark; @@ -155,5 +220,20 @@ .commit-meta { margin-top: 1em; margin-bottom: 1em; +}*/ + +/* Small devices (tablets, 768px and up) */ +@media (min-width: @screen-sm-min) { + article, .footer-wrapper { + width: 700px; + } } +/* Medium devices (desktops, 992px and up) */ +@media (min-width: @screen-md-min) { +} + +/* Large devices (large desktops, 1200px and up) */ +@media (min-width: @screen-lg-min) { +} +
--- a/wikked/assets/js/wikked.js Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/js/wikked.js Tue Jan 28 08:17:39 2014 -0800 @@ -4,7 +4,7 @@ * We need to alias/shim some of the libraries. */ require.config({ - //urlArgs: "bust=" + (new Date()).getTime(), + urlArgs: "bust=" + (new Date()).getTime(), paths: { jquery: 'js/jquery-1.8.3.min', underscore: 'js/underscore-min',
--- a/wikked/assets/js/wikked/models.js Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/js/wikked/models.js Tue Jan 28 08:17:39 2014 -0800 @@ -96,18 +96,19 @@ defaults: function() { return { url_extras: [ - { name: 'Special Pages', url: '/#/special' } + { name: 'Special Pages', url: '/#/special', icon: 'dashboard' } ] }; }, clearExtraUrls: function() { this.get('url_extras').length = 0; }, - addExtraUrl: function(name, url, index) { - if (index === undefined) { - this.get('url_extras').push({ name: name, url: url }); + addExtraUrl: function(name, url, index, icon) { + extra = { name: name, url: url, icon: icon }; + if (index === undefined || index < 0) { + this.get('url_extras').push(extra); } else { - this.get('url_extras').splice(index, 0, { name: name, url: url }); + this.get('url_extras').splice(index, 0, extra); } } }); @@ -237,8 +238,16 @@ // Add extra links to the footer. var model = this; - this.footer.addExtraUrl('Pages Linking Here', function() { return '/#/inlinks/' + model.id; }, 1); - this.footer.addExtraUrl('JSON', function() { return '/api/read/' + model.id; }); + this.footer.addExtraUrl( + 'Pages Linking Here', + function() { return '/#/inlinks/' + model.id; }, + 1, + 'link'); + this.footer.addExtraUrl( + 'JSON', + function() { return '/api/read/' + model.id; }, + -1, + 'cog'); }, checkStatePath: function() { return this.get('path'); @@ -301,7 +310,11 @@ initialize: function() { PageHistoryModel.__super__.initialize.apply(this, arguments); var model = this; - this.footer.addExtraUrl('JSON', function() { return '/api/history/' + model.id; }); + this.footer.addExtraUrl( + 'JSON', + function() { return '/api/history/' + model.id; }, + -1, + 'road'); }, doDiff: function(form) { var rev1 = $('input[name=rev1]:checked', form).val();
--- a/wikked/assets/tpl/footer.html Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/tpl/footer.html Tue Jan 28 08:17:39 2014 -0800 @@ -1,7 +1,7 @@ -<footer class="navbar" role="navigation"> - <ul class="nav navbar-nav"> +<footer role="navigation"> + <ul> {{#each url_extras}} - <li><a href="{{url}}">{{name}}</a></li> + <li>{{#if icon}}<span class="glyphicon glyphicon-{{icon}}"></span> {{/if}}<a href="{{url}}">{{name}}</a></li> {{/each}} <!-- TODO: last modified, etc. --> </ul>
--- a/wikked/assets/tpl/nav.html Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/tpl/nav.html Tue Jan 28 08:17:39 2014 -0800 @@ -1,4 +1,4 @@ -<nav class="navbar" role="navigation"> +<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#wikked-navbar-collapse"> <span class="sr-only">Toggle navigation</span> @@ -11,9 +11,9 @@ <div class="collapse navbar-collapse" id="wikked-navbar-collapse"> <ul class="nav navbar-nav"> - {{#ifneq action to='read'}}<li><a href="{{url_read}}">Read</a></li>{{/ifneq}} - {{#ifneq action to='edit'}}<li><a href="{{url_edit}}">Edit</a></li>{{/ifneq}} - {{#ifneq action to='history'}}<li><a href="{{url_hist}}">History</a></li>{{/ifneq}} + {{#ifneq action to='read'}}<li><a href="{{url_read}}"><span class="glyphicon glyphicon-book"></span> Read</a></li>{{/ifneq}} + {{#ifneq action to='edit'}}<li><a href="{{url_edit}}"><span class="glyphicon glyphicon-edit"></span> Edit</a></li>{{/ifneq}} + {{#ifneq action to='history'}}<li><a href="{{url_hist}}"><span class="glyphicon glyphicon-road"></span> History</a></li>{{/ifneq}} </ul> <form role="search" id="search" class="navbar-form navbar-left"> <div class="form-group"> @@ -25,10 +25,10 @@ </form> <ul class="nav navbar-nav navbar-right"> {{#if username}} - <li><a href="{{url_profile}}">{{username}}</a></li> - <li><a href="{{url_logout}}">Logout</a></li> + <li><a href="{{url_profile}}"><span class="glyphicon glyphicon-cog"></span> {{username}}</a></li> + <li><a href="{{url_logout}}"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> {{else}} - <li><a href="{{url_login}}">Login</a></li> + <li><a href="{{url_login}}"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> {{/if}} </ul> </div>
--- a/wikked/assets/tpl/read-page.html Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/tpl/read-page.html Tue Jan 28 08:17:39 2014 -0800 @@ -10,15 +10,18 @@ {{/if}} </header> {{/ifnot}} - <section> + <section class="content"> {{content}} </section> {{#if meta.category}} - <footer> + <section class="info"> + {{#if meta.category}} + <span class="info-categories">Categories: </span> {{#each meta.category}} - {{#ifeq @index to=0}}Categories: {{else}} | {{/ifeq}} + {{#ifeq @index to=0}} {{else}} | {{/ifeq}} <span><a href="{{get_cat_url url}}">{{name}}</a></span> {{/each}} - </footer> + {{/if}} + </section> {{/if}} </article>
--- a/wikked/assets/tpl/special-nav.html Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/assets/tpl/special-nav.html Tue Jan 28 08:17:39 2014 -0800 @@ -1,4 +1,4 @@ -<nav class="navbar" role="navigation"> +<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#wikked-navbar-collapse"> <span class="sr-only">Toggle navigation</span> @@ -12,7 +12,7 @@ <div class="collapse navbar-collapse" id="wikked-navbar-collapse"> <ul class="nav navbar-nav"> {{#if show_root_link}} - <li><a href="/#/special">Special Pages</a></li> + <li><a href="/#/special"><span class="glyphicon glyphicon-dashboard"></span> Special Pages</a></li> {{/if}} </ul> <form role="search" id="search" class="navbar-form navbar-left"> @@ -24,10 +24,10 @@ </form> <ul class="nav navbar-nav navbar-right"> {{#if username}} - <li><a href="{{url_profile}}">{{username}}</a></li> - <li><a href="{{url_logout}}">Logout</a></li> + <li><a href="{{url_profile}}"><span class="glyphicon glyphicon-cog"></span> {{username}}</a></li> + <li><a href="{{url_logout}}"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li> {{else}} - <li><a href="{{url_login}}">Login</a></li> + <li><a href="{{url_login}}"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> {{/if}} </ul> </div>
--- a/wikked/templates/index-dev.html Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/templates/index-dev.html Tue Jan 28 08:17:39 2014 -0800 @@ -6,7 +6,7 @@ <link rel="stylesheet" type="text/css" href="/static/css/wikked.min.css" /> </head> <body> - <div id="app" class="container"> + <div id="app"> </div> <script type="text/javascript"> var require = {
--- a/wikked/templates/index.html Tue Jan 28 08:16:35 2014 -0800 +++ b/wikked/templates/index.html Tue Jan 28 08:17:39 2014 -0800 @@ -6,7 +6,7 @@ <link rel="stylesheet" type="text/css" href="/static/css/wikked.min.css" /> </head> <body> - <div id="app" class="container"> + <div id="app"> </div> <script src="/static/js/require.js"></script> <script src="/static/js/wikked.min.js"></script>