Skip to content

Commit

Permalink
Something more for reaponsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@nisargjhaveri
nisargjhaveri committed Feb 1, 2016
1 parent addd7ff commit 6827cc4
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 40 deletions.
5 changes: 1 addition & 4 deletions src/app/views/skeleton_template/footer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}
?>
</div>
<nav>
<nav class="primary-links">
<?php if (isset($categorised_event)): ?>
<div class="crystal-ball">
<div class="ball-title"><?= __('Events') ?></div>
Expand All @@ -42,9 +42,6 @@
</ul>
</div>
<?php endif; ?>
<div class="primary-nav-helpers">

</div>
<div class="primary-nav-wrap">
<div class="primary-nav-open"></div>
<div class="primary-nav-overlay"></div>
Expand Down
43 changes: 25 additions & 18 deletions src/app/views/skeleton_template/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,27 +62,34 @@
<p class="dates"><?= __('February 19<sup>th</sup>, 20<sup>th</sup> and 21<sup>st</sup>') ?></p>
</div>
</article>
<?php if ($lang_list): ?>
<div class="lang-quick-links">
<?php foreach ($lang_list as $lang => $locale): ?>
<a href="<?= base_url() . $lang . $path ?>" lang="<?= $lang ?>" class="lang-link<?= ($lang == $lang_prefix) ? ' active-lang' : '' ?>"><?= locale_get_display_name($lang, $lang) ?></a> ·
<?php endforeach; ?>
<i class="icon-language"></i>
</div>
<?php endif; ?>
<?php if (isset($is_authenticated)): ?>
<div class="auth-quick-links">
<?php if ($is_authenticated): ?>
<?php if (!empty($user_nick)): ?>
<div class="nick"><?= sprintf(__('Hello, %s'), $user_nick) ?> <a href="<?= locale_base_url() . "auth/logout/" ?>"><?= __('Logout') ?></a></div>
<nav class="quick-links-wrap">
<div class="quick-links-open"></div>
<div class="quick-links-overlay"></div>

<?php if (isset($is_authenticated)): ?>
<div class="auth-quick-links">
<?php if ($is_authenticated): ?>
<?php if (!empty($user_nick)): ?>
<div class="nick"><?= sprintf(__('Hello, %s'), $user_nick) ?> <a href="<?= locale_base_url() . "auth/logout/" ?>"><?= __('Logout') ?></a></div>
<?php else: ?>
<div><a href="<?= locale_base_url() . "auth/logout/" ?>" class="pure-button btn"><?= __('Logout') ?></a></div>
<?php endif; ?>
<?php else: ?>
<div><a href="<?= locale_base_url() . "auth/logout/" ?>" class="pure-button btn"><?= __('Logout') ?></a></div>
<div><a href="<?= locale_base_url() . "auth/login/" ?>" class="pure-button btn"><?= __('Login / Register') ?></a></div>
<?php endif; ?>
<?php else: ?>
<div><a href="<?= locale_base_url() . "auth/login/" ?>" class="pure-button btn"><?= __('Login / Register') ?></a></div>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($lang_list): ?>
<div class="lang-quick-links">
<i class="icon-language"></i>
<ul>
<?php foreach ($lang_list as $lang => $locale): ?>
<li><a href="<?= base_url() . $lang . $path ?>" lang="<?= $lang ?>" class="lang-link<?= ($lang == $lang_prefix) ? ' active-lang' : '' ?>"><?= locale_get_display_name($lang, $lang) ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<?php endif; ?>
</nav>
<?php
$display_titles = [
'about' => 'About',
Expand Down
15 changes: 15 additions & 0 deletions src/static/scripts/navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,4 +335,19 @@ $(function() {

$('.primary-nav-overlay').on('click', closePrimaryNavSidebar);
$('.primary-nav-open').on('click', openPrimaryNavSidebar);

function openQuickLinksSidebar() {
if ($('.primary-nav-wrap').hasClass('open')) {
closePrimaryNavSidebar();
return;
}
$('.quick-links-wrap').addClass('open');
}

function closeQuickLinksSidebar() {
$('.quick-links-wrap').removeClass('open');
}

$('.quick-links-overlay').on('click', closeQuickLinksSidebar);
$('.quick-links-open').on('click', openQuickLinksSidebar);
});
124 changes: 106 additions & 18 deletions src/static/styles/core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ p {
}
}

nav {
nav.primary-links {
position: fixed;
bottom: 0;
width: 100%;
Expand Down Expand Up @@ -1224,6 +1224,22 @@ textarea {
border-bottom: 1px solid black;
padding: .5em 1em;

ul {
list-style: none;
display: inline-block;
margin: 0;
padding: 0;

li {
display: inline-block;
margin: 0;

&:before {
content: ' · ';
}
}
}

a {
color: #1f8dd6;

Expand Down Expand Up @@ -1263,10 +1279,7 @@ textarea {

.page:before {
background-image: none;
}

.primary-nav-wrap {
pointer-events: all;
pointer-events: none;
}

.primary-nav-open {
Expand All @@ -1280,30 +1293,31 @@ textarea {
cursor: pointer;
}

.primary-nav-wrap.open .primary-nav-overlay {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.1);
}

.primary-nav-wrap {
z-index: 500;
position: fixed;
top: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, .9);
padding: 2em 1em;
margin-left: -100%;
transition: all 0.3s;
transition: all .3s;
pointer-events: all;
}

.primary-nav-wrap.open {
margin-left: 0;

.primary-nav-overlay {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .2);
}
}

.primary-nav {
Expand Down Expand Up @@ -1382,7 +1396,7 @@ textarea {
}
}

.mobile-page-title {
.page-open .mobile-page-title {
display: block;
position: absolute;
margin-bottom: $nav-link-bottom-margin;
Expand All @@ -1401,4 +1415,78 @@ textarea {
.mobile-page-title:empty {
display: none;
}

.quick-links-open {
display: block;
position: fixed;
top: 0;
right: 0;
height: 50px;
width: 50px;
background-color: black;
cursor: pointer;
}

.quick-links-wrap.open .quick-links-overlay {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, .2);
}

.quick-links-wrap {
z-index: 500;
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .9);
padding: 2em 1em;
margin-right: -100%;
transition: all .3s;

&.open {
margin-right: 0;
}
}

.auth-quick-links, .lang-quick-links {
position: relative;
margin: 3px;
}

.auth-quick-links {
.nick {
border-radius: 0;
border: none;

a {
display: block;
}
}
}

.lang-quick-links {
border-radius: 0;
border: none;
text-align: center;

ul {
display: block;
margin: auto;

li {
display: block;
font-size: 1.1em;
margin: 4px;

&:before {
content: "";
}
}
}
}
}

0 comments on commit 6827cc4

Please sign in to comment.