[DevHub Landing] Add logged-in state for mobile navigation.
Fixes #4027 * Show avatar only for larger screen devices (might need some adjustments later..)
This commit is contained in:
Christopher Grebs
Родитель
120871dfe0
Коммит
22ea96e2ec
|
|
@ -0,0 +1,11 @@
|
|||
<nav class="DevHub-Navigation {% if request.user.is_authenticated() %}DevHub-Navigation--signedin{% endif %}">
|
||||
<ul>
|
||||
<li><a href="#"><div class="Logo{% if request.user.is_authenticated() %} Logo--secondary{% endif %}" alt="{{ dev_page_title() }}" /></a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
{% if request.user.is_authenticated() %}
|
||||
<li class="avatar"><a href="#"><img src="{{ request.user.picture_url }}" /></a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -37,26 +37,21 @@
|
|||
data-raven-urls="{{ settings.RAVEN_ALLOW_LIST }}"
|
||||
{% block bodyattrs %}{% endblock %}>
|
||||
|
||||
<nav class="DevHub-Navigation">
|
||||
<ul>
|
||||
<li><a href="#"><div class="Logo" alt="{{ dev_page_title() }}" /></a></li>
|
||||
<li><a href="#">Docs</a></li>
|
||||
<li><a href="#">Support</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% include 'devhub/new-landing/components/navigation.html' %}
|
||||
|
||||
<section class="DevHub-Header">
|
||||
<h1>{{ _('Customize Your Firefox') }}</h1>
|
||||
<p>
|
||||
{% trans %}
|
||||
Add-ons let millions of Firefox users enhance their browsing experience.
|
||||
If you know <a href="#">HTML</a>, <a href="#">JavaScript</a>, and <a href="#">CSS</a>,
|
||||
you already have all the necessary skills to make a great add-on.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<a href="#" class="Button Button--primary">Learn How to make an Add-on</a>
|
||||
</section>
|
||||
{% if not request.user.is_authenticated() %}
|
||||
<section class="DevHub-Header">
|
||||
<h1>{{ _('Customize Your Firefox') }}</h1>
|
||||
<p>
|
||||
{% trans %}
|
||||
Add-ons let millions of Firefox users enhance their browsing experience.
|
||||
If you know <a href="#">HTML</a>, <a href="#">JavaScript</a>, and <a href="#">CSS</a>,
|
||||
you already have all the necessary skills to make a great add-on.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<a href="#" class="Button Button--primary">Learn How to make an Add-on</a>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% block site_js %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,20 @@
|
|||
// Colors
|
||||
@primary-font: 'Fira Sans', sans-serif;
|
||||
@primary-font-color: #fff;
|
||||
@secondary-font-color: #333;
|
||||
|
||||
@button-border: #979797;
|
||||
@primary-button-background: #29c978;
|
||||
|
||||
@primary-section-background: #0568ba;
|
||||
@secondary-section-background: #f3f5f8;
|
||||
|
||||
@retina: ~"only screen and (-webkit-min-device-pixel-ratio: 1.3),
|
||||
only screen and (-o-min-device-pixel-ratio: 13/10),
|
||||
only screen and (min-resolution: 120dpi)";
|
||||
|
||||
@tablet: ~"only screen and (min-device-width: 768px)";
|
||||
|
||||
|
||||
// Common styles
|
||||
* {
|
||||
|
|
@ -68,6 +78,20 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.Logo {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background: url('../../img/developers/addons-logo.svg') 50% 50% no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.Logo--secondary {
|
||||
background: url('../../img/developers/addons-logo-black.svg') 50% 50% no-repeat;
|
||||
}
|
||||
|
||||
.DevHub-Navigation {
|
||||
background-color: @primary-section-background;
|
||||
padding: 0 20px 20px;
|
||||
|
|
@ -87,15 +111,6 @@ section {
|
|||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.Logo {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background: url('../../img/developers/addons-logo.svg') 50% 50% no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -105,8 +120,27 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
// Swap for higher-resolution (background) images
|
||||
// Only boilerplate for now... might just go away if not needed...
|
||||
// @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
|
||||
// only screen and (-o-min-device-pixel-ratio: 13/10),
|
||||
// only screen and (min-resolution: 120dpi) {}
|
||||
.DevHub-Navigation--signedin {
|
||||
background-color: @secondary-section-background;
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
color: @secondary-font-color;
|
||||
}
|
||||
|
||||
&.avatar {
|
||||
display: none;
|
||||
|
||||
@media @tablet {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="33px" height="34px" viewBox="0 0 33 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="landing-page---signed-in---firstrun---visual-design" transform="translate(-161.000000, -24.000000)" fill="#333333">
|
||||
<g id="header">
|
||||
<g id="Group-9" transform="translate(154.000000, 13.000000)">
|
||||
<path d="M30.9396266,37.1806419 L30.9396266,29.6091212 C30.9396266,29.6091212 31.1529089,27.6362602 32.4326025,27.6362602 C33.7122962,27.6362602 33.605655,29.7157623 36.0050806,29.7157623 C37.2314537,29.7157623 39.3109559,29.0759155 39.3109559,25.3434757 C39.3109559,21.6110359 37.2314537,21.1311508 36.0050806,21.1311508 C33.605655,21.1311508 33.7122962,23.1040118 32.4326025,23.1040118 C31.1529089,23.1040118 30.9396266,21.0778302 30.9396266,21.0778302 L30.9396266,17.9852372 C30.9396266,16.8121847 29.9798564,15.8524145 28.8068039,15.8524145 L23.2081442,15.8524145 C23.2081442,15.8524145 21.3952448,15.5324911 21.3952448,14.2527974 C21.3952448,12.9731038 23.4214264,12.8664626 23.4214264,10.467037 C23.4214264,9.24066396 22.728259,7.32112349 18.9958192,7.32112349 C15.2633794,7.32112349 14.7301737,9.24066396 14.7301737,10.467037 C14.7301737,12.8664626 16.5430731,12.9731038 16.5430731,14.2527974 C16.5430731,15.5324911 14.7301737,15.8524145 14.7301737,15.8524145 L9.61139915,15.8524145 C8.43834664,15.8524145 7.4785764,16.8121847 7.4785764,17.9852372 L7.4785764,22.1442416 C7.4785764,22.1442416 7.26529413,25.3434757 9.82468142,25.3434757 C11.4776191,25.3434757 11.5309396,23.1573324 13.7170829,23.1573324 C14.7834943,23.1573324 15.8499057,24.1704232 15.8499057,26.3565665 C15.8499057,28.5960304 14.7834943,29.7157623 13.7170829,29.7157623 C11.5842602,29.7157623 11.4776191,27.529619 9.82468142,27.529619 C7.26529413,27.529619 7.4785764,30.622212 7.4785764,30.622212 L7.4785764,37.1806419 C7.4785764,38.3536945 8.43834664,39.3134647 9.61139915,39.3134647 L16.5430731,39.3134647 C16.5430731,39.3134647 19.9022689,39.526747 19.9022689,36.9673597 C19.9022689,35.314422 17.7694462,35.0478192 17.7694462,32.8616759 C17.7694462,31.7952645 18.9424987,30.4622503 21.1819625,30.4622503 C23.4214264,30.4622503 24.7011201,31.7952645 24.7011201,32.8616759 C24.7011201,34.9944986 22.6216179,35.314422 22.6216179,36.9673597 C22.6216179,39.5800675 25.9808137,39.3134647 25.9808137,39.3134647 L28.8068039,39.3134647 C29.9798564,39.3134647 30.9396266,38.3536945 30.9396266,37.1806419 Z" id="Shape" transform="translate(23.392590, 23.321123) rotate(-45.000000) translate(-23.392590, -23.321123) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 2.9 KiB |
Загрузка…
Ссылка в новой задаче