Design fixes, fixes #288 and fixes #119

This commit is contained in:
Stéphane Goetz 2015-07-21 22:40:13 +02:00
parent 046a419c31
commit 642699ec7e
10 changed files with 133 additions and 96 deletions

View File

@ -19,7 +19,7 @@
@import "code.less"; @import "code.less";
@import "grid.less"; @import "grid.less";
//@import "tables.less"; //@import "tables.less";
@import "forms.less"; //@import "forms.less";
@import "buttons.less"; @import "buttons.less";
// Components // Components
@ -42,7 +42,7 @@
//@import "list-group.less"; //@import "list-group.less";
//@import "panels.less"; //@import "panels.less";
//@import "responsive-embed.less"; //@import "responsive-embed.less";
@import "wells.less"; //@import "wells.less";
//@import "close.less"; //@import "close.less";
// Components w/ JavaScript // Components w/ JavaScript

View File

@ -140,7 +140,8 @@
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindex-navbar-fixed;
// Undo the rounded corners // Undo the rounded corners
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
@ -283,7 +284,8 @@
// Extension of the `.form-inline` with some extra flavor for optimum display in // Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars. // our navbars.
.navbar-form { //DAUX.io / onigoetz; removed so we can safely remove forms.less
/*.navbar-form {
margin-left: -@navbar-padding-horizontal; margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal; padding: 10px @navbar-padding-horizontal;
@ -318,7 +320,7 @@
padding-bottom: 0; padding-bottom: 0;
.box-shadow(none); .box-shadow(none);
} }
} }*/
// Dropdown menus // Dropdown menus

View File

@ -6,6 +6,8 @@ a {
} }
.btn { .btn {
display: inline-block;
&.btn-sidebar { &.btn-sidebar {
padding: 7px 10px; padding: 7px 10px;
.kill-background-image; .kill-background-image;
@ -44,7 +46,6 @@ code {
box-shadow: 0 1px 5px rgba(0,0,0,.25); box-shadow: 0 1px 5px rgba(0,0,0,.25);
background-color: @dark; background-color: @dark;
margin-bottom: 0px; margin-bottom: 0px;
z-index: 200;
.container, .container-fluid { .container, .container-fluid {
.kill-background-image; .kill-background-image;
@ -65,19 +66,6 @@ code {
} }
} }
} }
@media (min-width: 768px) and (max-width: 979px) {
&.navbar-fixed-top {
position: fixed;
}
}
@media (max-width: 767px) {
&.navbar-fixed-top {
margin-left: 0px;
margin-right: 0px;
}
}
} }
//Sidebar Nav List //Sidebar Nav List
@ -308,12 +296,8 @@ table {
z-index: 200; z-index: 200;
} }
.well { .sidebar-links {
&.well-sidebar { padding:20px;
.kill-box-shadow;
background-color: transparent;
border-radius: 0;
border: none;
a { a {
font-size: 13px; font-size: 13px;
@ -330,4 +314,3 @@ table {
} }
} }
} }
}

View File

@ -163,25 +163,79 @@ Homepage
.twitter { .twitter {
margin-top: 20px; margin-top: 20px;
}
.twitter:first-child { &:first-child {
margin-top: 40px; margin-top: 40px;
} }
} }
}
/* =========================================================================================== /* ===========================================================================================
Docs Body & Page Structure Docs Body & Page Structure
============================================================================================== */ ============================================================================================== */
html, body { html, body {
margin: 0;
padding: 0;
height: 100%; height: 100%;
background-color: @light; background-color: #fff;
color: @text; color: @text;
} }
.columns {
.left-column {
background-color:@sidebar-background;
}
.right-column {
.content-page {
padding: 10px;
background-color:#fff;
}
}
}
.container-fluid .navbar-static-top {
margin-left:-15px;
margin-right:-15px;
}
//mobile friendly sub-nav
.responsive-collapse {
padding: 10px 15px;
display: block;
background-color: @lines;
border-bottom: 1px solid @lines;
}
.sub-nav-collapse {
display: none;
}
.content-area,
.article-tree {
padding: 0px;
}
@media screen and (min-width: 767px) {
body {
//Needed only for floating code blocks
background-color:@light;
}
.navbar-static-top {
position:fixed;
z-index: @zindex-navbar-fixed;
width:100%;
}
.responsive-collapse {
display: none;
}
.sub-nav-collapse {
display: block !important;
}
//100% Height Columns //100% Height Columns
.container-fluid { .container-fluid {
@ -190,12 +244,18 @@ html, body {
} }
} }
.content-area,
.article-tree {
overflow: auto;
height: 100%;
}
.columns { .columns {
height:100%; height:100%;
padding-top:@navbar-height; padding-top:@navbar-height;
.left-column { .left-column {
background-color: @sidebar-background;
border-right:1px solid @lines; border-right:1px solid @lines;
overflow-x:hidden; overflow-x:hidden;
} }
@ -204,40 +264,9 @@ html, body {
.content-page { .content-page {
padding:20px; padding:20px;
min-height:100%; min-height:100%;
background-color: white;
} }
} }
} }
.content-area, .article-tree {
overflow: auto;
padding: 0px;
@media (min-width: 767px) {
height: 100%;
}
}
//mobile friendly sub-nav
.responsive-collapse {
padding: 10px 15px;
display: none;
background-color: @lines;
border-bottom: 1px solid @lines;
@media (max-width: 767px) {
display: block;
}
}
.sub-nav-collapse {
@media (max-width: 768px) {
display: none;
}
@media (min-width: 768px) {
display: block;
}
} }
//CSS For Fluid Tables //CSS For Fluid Tables
@ -299,3 +328,13 @@ html, body {
content: attr(data-title); content: attr(data-title);
} }
} }
@media print {
.content-area {
width:100% !important;
}
h1 a[href]:after {
font-size:50%;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,5 @@
<?php $this->layout('theme::layout/00_layout') ?> <?php $this->layout('theme::layout/00_layout') ?>
<div class="navbar navbar-fixed-top hidden-print"> <div class="navbar navbar-static-top hidden-print">
<div class="container"> <div class="container">
<?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?> <?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
</div> </div>
@ -8,7 +8,7 @@
<a href="https://github.com/<?= $params['html']['repo']; ?>" target="_blank" id="github-ribbon" class="hidden-print"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <a href="https://github.com/<?= $params['html']['repo']; ?>" target="_blank" id="github-ribbon" class="hidden-print"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<?php } ?> <?php } ?>
<div class="homepage-hero well container-fluid"> <div class="homepage-hero container-fluid">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="text-center col-sm-12"> <div class="text-center col-sm-12">
@ -28,9 +28,7 @@
</div> </div>
<div class="hero-buttons container-fluid"> <div class="hero-buttons container-fluid">
<div class="container"> <div class="container text-center">
<div class="row">
<div class="text-center col-sm-12">
<?php <?php
if ($params['html']['repo']) { if ($params['html']['repo']) {
echo '<a href="https://github.com/' . $params['html']['repo'] . '" class="btn btn-secondary btn-hero">View On GitHub</a>'; echo '<a href="https://github.com/' . $params['html']['repo'] . '" class="btn btn-secondary btn-hero">View On GitHub</a>';
@ -39,8 +37,7 @@
echo '<a href="' . $node . '" class="btn btn-primary btn-hero">' . $key . '</a>'; echo '<a href="' . $node . '" class="btn btn-primary btn-hero">' . $key . '</a>';
} }
?> ?>
</div> <div class="clearfix"></div>
</div>
</div> </div>
</div> </div>
@ -54,7 +51,7 @@
</div> </div>
</div> </div>
<div class="homepage-footer well container-fluid"> <div class="homepage-footer container-fluid">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-5 col-sm-offset-1"> <div class="col-sm-5 col-sm-offset-1">

View File

@ -4,7 +4,7 @@
<a href="https://github.com/<?= $params['html']['repo']; ?>" target="_blank" id="github-ribbon" class="hidden-print"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <a href="https://github.com/<?= $params['html']['repo']; ?>" target="_blank" id="github-ribbon" class="hidden-print"><img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<?php } ?> <?php } ?>
<div class="container-fluid fluid-height wrapper"> <div class="container-fluid fluid-height wrapper">
<div class="navbar navbar-fixed-top hidden-print"> <div class="navbar navbar-static-top hidden-print">
<div class="container-fluid"> <div class="container-fluid">
<?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?> <?php $this->insert('theme::partials/navbar_content', ['params' => $params]); ?>
</div> </div>
@ -30,7 +30,7 @@
?> ?>
<?php if (!empty($params['html']['links']) || !empty($params['html']['twitter']) || $params['html']['toggle_code']) { ?> <?php if (!empty($params['html']['links']) || !empty($params['html']['twitter']) || $params['html']['toggle_code']) { ?>
<div class="well well-sidebar"> <div class="sidebar-links">
<!-- Links --> <!-- Links -->
<?php <?php