Skip to content

Commit

Permalink
fix(layout): fix mobile layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@papasikis
papasikis committed Aug 2, 2017
1 parent 9e0bc7c commit 01cb66a
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 81 deletions.
11 changes: 5 additions & 6 deletions src/components/layout/Layout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,20 @@
.pre-loader {
position: absolute;
left: calc(50% - 140px/2);
top: calc(50% - 104px/2);
left: $vuestic-preloader-left;
top: $vuestic-preloader-top;
}
.sidebar-hidden & {
margin-left: $sidebar-left;
}
@include media-breakpoint-down(md) {
margin-left: $content-mobile-wrap-margin;
padding-top: $layout-mobile-padding;
padding-right: $content-mobile-wrap-margin;
padding: $content-mobile-wrap;
margin-left: 0;
.sidebar-hidden & {
margin-left: $content-mobile-wrap-margin;
margin-left: 0;
}
}
}
Expand Down
150 changes: 76 additions & 74 deletions src/components/ui/typography/Typography.vue
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,37 @@
<template>
<div class="ui-typography">
<div class="row">
<vuestic-widget class="col-md-12">
<div class="typo-headers">
<h1>Very Important Information H1</h1>
<h2>Sections & Modal Names H2</h2>
<h3>Articles & Block Headings H3</h3>
<h4>Random Tiny Heading H4</h4>
</div>
<div class="typo-articles">
<p>
The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, <span
class="vue-green-text">woodlands</span>, thorny scrublands, <span
class="vue-clickable-text">mountains</span>
, and coastal hills. However, various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain <span
class="vue-highlighted-text">highlighted text</span> zebra are endangered.</p>
<blockquote class="blockquote">
<div class="col-md-12">
<vuestic-widget>
<div class="typo-headers">
<h1>Very Important Information H1</h1>
<h2>Sections & Modal Names H2</h2>
<h3>Articles & Block Headings H3</h3>
<h4>Random Tiny Heading H4</h4>
</div>
<div class="typo-articles">
<p>
Blockquotes. However, various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins. </p>
<footer class="blockquote-footer">Jefferey Lebowski</footer>
</blockquote>
<p>
lthough zebra species may have overlapping ranges, they do not interbreed. In captivity, plains zebras have been crossed with mountain zebras. The hybrid foals <span
class="vue-selected-text">selected text</span> lacked a dewlap and resembled their
</p>
</div>
<div class="vue-lists">
<h2>Lists</h2>
<div class="row">
<div class="col-md-6">
<h3>Unordered</h3>
<ul class="vue-unordered">
<li>
A wide variety of hypotheses have been proposed to account for the evolution of the striking stripes of zebras.
</li>
<li>The more traditional of these (1 and 2, below) relate to camouflage.</li>
<li>The vertical striping may help the zebra hide in the grass by disrupting its outline.</li>
<li>
In addition, even at moderate distances, the striking striping merges to an apparent grey.
<ul class="vue-list-inner">
<li>However, the camouflage has been contested with arguments that most of a zebra's predator.</li>
<li>Such as lions and hyenas cannot see well at a distance.</li>
<li>More likely to have smelled or heard a zebra.</li>
</ul>
</li>
<li>Before seeing it from a distance, especially at night.</li>
</ul>
</div>
<div class="col-md-6 text-left">
<div>
<h3>Ordered</h3>
<ol class="vue-ordered">
The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, <span
class="vue-green-text">woodlands</span>, thorny scrublands, <span
class="vue-clickable-text">mountains</span>
, and coastal hills. However, various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain <span
class="vue-highlighted-text">highlighted text</span> zebra are endangered.</p>
<blockquote class="blockquote">
<p>
Blockquotes. However, various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins. </p>
<footer class="blockquote-footer">Jefferey Lebowski</footer>
</blockquote>
<p>
lthough zebra species may have overlapping ranges, they do not interbreed. In captivity, plains zebras have been crossed with mountain zebras. The hybrid foals <span
class="vue-selected-text">selected text</span> lacked a dewlap and resembled their
</p>
</div>
<div class="vue-lists">
<h2>Lists</h2>
<div class="row">
<div class="col-md-6">
<h3>Unordered</h3>
<ul class="vue-unordered">
<li>
A wide variety of hypotheses have been proposed to account for the evolution of the striking stripes of zebras.
</li>
Expand All @@ -59,43 +40,64 @@
<li>
In addition, even at moderate distances, the striking striping merges to an apparent grey.
<ul class="vue-list-inner">
<li>However, the camouflage has been contested with arguments that most of a zebra's predator.
</li>
<li>However, the camouflage has been contested with arguments that most of a zebra's predator.</li>
<li>Such as lions and hyenas cannot see well at a distance.</li>
<li>More likely to have smelled or heard a zebra.</li>
</ul>
</li>
<li>Before seeing it from a distance, especially at night.</li>
</ol>
</ul>
</div>
<div class="col-md-6 text-left">
<div>
<h3>Ordered</h3>
<ol class="vue-ordered">
<li>
A wide variety of hypotheses have been proposed to account for the evolution of the striking stripes of zebras.
</li>
<li>The more traditional of these (1 and 2, below) relate to camouflage.</li>
<li>The vertical striping may help the zebra hide in the grass by disrupting its outline.</li>
<li>
In addition, even at moderate distances, the striking striping merges to an apparent grey.
<ul class="vue-list-inner">
<li>However, the camouflage has been contested with arguments that most of a zebra's predator.
</li>
<li>Such as lions and hyenas cannot see well at a distance.</li>
<li>More likely to have smelled or heard a zebra.</li>
</ul>
</li>
<li>Before seeing it from a distance, especially at night.</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="vue-misc">
<h2>Misc</h2>
<div class="row">
<div class="col-md-6">
<h3>Address</h3>
<address>
<strong>SJØNNA</strong><br>
Nezalezhnasti Ave, 13 - 28A<br>
Minsk, Belarus, 220141<br>
+375 29 319-53-98<br>
<br>
<b>Vasili Savitski</b><br>
<a href="mailto">[email protected]</a>
<div class="vue-misc">
<h2>Misc</h2>
<div class="row">
<div class="col-md-6">
<h3>Address</h3>
<address>
<strong>SJØNNA</strong><br>
Nezalezhnasti Ave, 13 - 28A<br>
Minsk, Belarus, 220141<br>
+375 29 319-53-98<br>
<br>
<b>Vasili Savitski</b><br>
<a href="mailto">[email protected]</a>

</address>
</div>
<div class="col-md-6">
<h3>Well</h3>
<div class="well">
Zebras have excellent eyesight. It is believed that they can see in color. Like most ungulates, the zebra's eyes are on the sides of its head, giving it a wide field of view.
</address>
</div>
<div class="col-md-6">
<h3>Well</h3>
<div class="well">
Zebras have excellent eyesight. It is believed that they can see in color. Like most ungulates, the zebra's eyes are on the sides of its head, giving it a wide field of view.
</div>
</div>
</div>
</div>
</div>
</vuestic-widget>
</vuestic-widget>
</div>
</div>
</div>
</template>
Expand Down
10 changes: 9 additions & 1 deletion src/sass/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,12 @@ $sidebar-mobile-left: $layout-mobile-padding;
$content-mobile-wrap-margin: 1.125rem;
$sidebar-mobile-z-index: 1000;

$content-mobile-wrap-pl: 1rem;
$content-mobile-wrap-pr : 1rem;
$content-mobile-wrap-pt : 2rem;
$content-mobile-wrap-pb : $layout-padding;
$content-mobile-wrap: $content-mobile-wrap-pt $content-mobile-wrap-pr $content-mobile-wrap-pb $content-mobile-wrap-pl;

$nav-mobile-padding-h : .875rem;
$nav-mobile-pt: 3rem;
$nav-mobile-pb: 1.375rem;
Expand Down Expand Up @@ -305,4 +311,6 @@ $icon-font-path: './fonts/';
$tab-content-pt: 3.125rem;
$tab-content-pb: 1.5rem;


//PreLoader
$vuestic-preloader-left: calc(50% - 140px/2);
$vuestic-preloader-top: calc(50% - 104px/2);

0 comments on commit 01cb66a

Please sign in to comment.