зеркало из https://github.com/mozilla/kitsune.git
media gallery design
This commit is contained in:
Kasey Kelly
Tasos Katsoulas
Родитель
c8371821d0
Коммит
fcad0a61bb
|
|
@ -18,59 +18,6 @@
|
|||
</form>
|
||||
</section>
|
||||
|
||||
<section id="recent-threads" class="sumo-page-section--sm">
|
||||
<h2 class="text-display-xs">Community Discussions</h2>
|
||||
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="/en-US/forums/contributors/713911">
|
||||
[Feedback Needed] Community Strategy Recommendation
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/en-US/forums/contributors/713863">
|
||||
Firefox 72 for Desktop - Release Notes / Issues / Discussions
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/en-US/forums/contributors/713612">
|
||||
Community Management Update
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/en-US/forums/contributors/713909">
|
||||
Can we mark questions solved in some way
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="/en-US/forums/contributors/713908">
|
||||
[RSVP Open!] Firefox 73 Sprint
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<p>
|
||||
<a href="/en-US/forums/contributors">
|
||||
Go to the SUMO community discussions forum
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="doc-content" class="sumo-page-section--sm normalize-headings">
|
||||
<h1 id="w_community-news">Community news</h1>
|
||||
<p>The Mozilla Support (SUMO) community has done a lot over the years. Visit the <a href="http://blog.mozilla.org/sumo/">SUMO blog</a> for the latest news.
|
||||
</p>
|
||||
<h1 id="w_weekly-meetings">Weekly meetings</h1>
|
||||
<p>Our weekly meetings are open to the community! These meetings are a great way for you to learn about the latest projects, ask questions and share feedback. The Wednesday SUMO community meeting covers all products and community news. See our <a href="https://wiki.mozilla.org/Support/Weekly_Meetings">Weekly Meetings wiki page</a> for more information.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
|
||||
{% if threads %}
|
||||
<section id="recent-threads" class="sumo-page-section--sm">
|
||||
<h2 class="text-display-xs">{{ _('Community Discussions') }}</h2>
|
||||
|
|
|
|||
|
|
@ -7,52 +7,73 @@
|
|||
{% set scripts = ('wiki', 'gallery') %}
|
||||
{% set crumbs = [(None, _('Media Gallery'))] %}
|
||||
|
||||
{% block above_main %}
|
||||
{% if user.is_authenticated() %}
|
||||
<a id="btn-upload" class="btn btn-submit" href="#">{{ _('Upload a New Media File') }}</a>
|
||||
{% endif %}
|
||||
<h1>{{ _('Media Gallery') }}</h1>
|
||||
{% endblock %}
|
||||
{% block contentwrap %}
|
||||
|
||||
{% block content %}
|
||||
<div class="cf">
|
||||
<div class="grid_6">
|
||||
<form action="{{ url('gallery.search', media_type=media_type) }}" method="get" class="simple-search-form" id="gallery-search">
|
||||
<input class="searchbox" type="search" autocomplete="off" name="q" required="required" placeholder="{{ _('Search Gallery') }}" />
|
||||
<button class="submit-button" title="{{ _('Search') }}" type="submit">
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="grid_6">
|
||||
<div id="locale-filter">
|
||||
<form action="#" method="get">
|
||||
<label for="select-locale">{{ _('Show media for:') }}</label>
|
||||
<select id="select-locale" name="lang" class="autosubmit">
|
||||
{% for lang in settings.LANGUAGE_CHOICES %}
|
||||
<option value="{{ lang[0] }}" {% if lang[0] == request.LANGUAGE_CODE %}selected="selected"{% endif %}>{{ lang[1] }} ({{ lang[0] }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<noscript>
|
||||
<input type="submit" value="{{ _('Go') }}">
|
||||
</noscript>
|
||||
</form>
|
||||
<section class="sumo-page-section--lg shade-bg">
|
||||
<div class="mzp-l-content">
|
||||
{{ breadcrumbs(crumbs, id='main-breadcrumbs') }}
|
||||
<div class="sumo-l-two-col sidebar-on-right align-center cols-on-medium">
|
||||
<div class="sumo-l-two-col--main">
|
||||
<h1 class="text-display-lg no-logo">
|
||||
<span class="product-title-text">{{ _('Media Gallery') }}</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div id="media-type-filter">
|
||||
<span>{{ _("Show:") }}</span>
|
||||
<select id="media-type-select">
|
||||
<option {% if media_type == 'image' %}selected="selected"{% endif %} value="{{ url('gallery.gallery', 'image') }}">{{ _('Images') }}</option>
|
||||
<option {% if media_type == 'video' %}selected="selected"{% endif %} value="{{ url('gallery.gallery', 'video') }}">{{ _('Videos') }}</option>
|
||||
</select>
|
||||
<noscript>
|
||||
<a href="{{ url('gallery.gallery', 'image') }}">{{ _('Images') }}</a> |
|
||||
<a href="{{ url('gallery.gallery', 'video') }}">{{ _('Videos') }}</a>
|
||||
</noscript>
|
||||
<div class="sumo-l-two-col--sidebar forum--masthead-cta">
|
||||
{% if user.is_authenticated() %}
|
||||
<a id="btn-upload" class="sumo-button primary-button" href="#">{{ _('Upload a New Media File') }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sumo-page-section">
|
||||
<div class="mzp-l-content">
|
||||
<div class="sumo-l-two-col sidebar-on-right contributors">
|
||||
<div class="sumo-l-two-col--one-half">
|
||||
<form action="{{ url('gallery.search', media_type=media_type) }}" method="get" class="media-search simple-search-form" id="gallery-search">
|
||||
<input class="searchbox" type="search" autocomplete="off" name="q" required="required" placeholder="{{ _('Search Gallery') }}" />
|
||||
<button class="submit-button search-button" title="{{ _('Search') }}" type="submit">{{ _('Search') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="sumo-l-two-col--one-half">
|
||||
<div class="media-filters">
|
||||
<div id="locale-filter">
|
||||
<form action="#" method="get">
|
||||
<div class="field">
|
||||
<label for="select-locale">{{ _('Show media for:') }}</label>
|
||||
<select id="select-locale" name="lang" class="autosubmit">
|
||||
{% for lang in settings.LANGUAGE_CHOICES %}
|
||||
<option value="{{ lang[0] }}" {% if lang[0] == request.LANGUAGE_CODE %}selected="selected"{% endif %}>{{ lang[1] }} ({{ lang[0] }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<noscript>
|
||||
<input type="submit" value="{{ _('Go') }}">
|
||||
</noscript>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="media-type-filter" class="field">
|
||||
<label>{{ _("Show:") }}</label>
|
||||
<select id="media-type-select">
|
||||
<option {% if media_type == 'image' %}selected="selected"{% endif %} value="{{ url('gallery.gallery', 'image') }}">{{ _('Images') }}</option>
|
||||
<option {% if media_type == 'video' %}selected="selected"{% endif %} value="{{ url('gallery.gallery', 'video') }}">{{ _('Videos') }}</option>
|
||||
</select>
|
||||
<noscript>
|
||||
<a href="{{ url('gallery.gallery', 'image') }}">{{ _('Images') }}</a> |
|
||||
<a href="{{ url('gallery.gallery', 'video') }}">{{ _('Videos') }}</a>
|
||||
</noscript>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sumo-page-section">
|
||||
<div class="mzp-l-content">
|
||||
{% with media_list=media %}
|
||||
{% include 'gallery/includes/media_list.html' %}
|
||||
{% endwith %}
|
||||
|
|
@ -60,4 +81,6 @@
|
|||
{% if user.is_authenticated() %}
|
||||
{% include 'gallery/includes/upload_media_form.html' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% if media_list.object_list %}
|
||||
<ol id="media-list" class="cf">
|
||||
<ol id="media-list" class="media-list">
|
||||
{% for m in media_list.object_list %}
|
||||
<li>
|
||||
<a href="{{ m.get_absolute_url() }}" title="{{ m.title }}">
|
||||
|
|
@ -8,11 +8,9 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
<div class="grid_12">
|
||||
{{ media_list|paginator }}
|
||||
</div>
|
||||
|
||||
{{ media_list|paginator }}
|
||||
|
||||
{% else %}
|
||||
<div class="grid_12">
|
||||
<p>{{ _('No media files found.') }}</p>
|
||||
</div>
|
||||
<p>{{ _('No media files found.') }}</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
|
||||
{# these macros are only used here so it's better to define them locally #}
|
||||
{% macro raw_row(html, classes, label) %}
|
||||
<label class="row-left {{ classes }}">{{ label }}</label>
|
||||
<div class="row-right {{ classes }}">{{ html|safe }}</div>
|
||||
<div class="field">
|
||||
<label class="row-left {{ classes }}">{{ label }}</label>
|
||||
<div class="row-right {{ classes }}">{{ html|safe }}</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro row(field, classes, label=None) %}
|
||||
|
|
@ -25,9 +27,9 @@
|
|||
{% endmacro %}
|
||||
|
||||
{% macro submit_row(form, type) %}
|
||||
<div class="upload-action">
|
||||
<input type="submit" name="upload" value="{{ _('Upload file') }}">
|
||||
<input type="submit" name="cancel" class="kbox-cancel link-btn{% if form.instance.pk %} draft{% endif %}" data-action="{{ url('gallery.cancel_draft', media_type=type) }}" value="{{ _('Cancel') }}">
|
||||
<div class="upload-action sumo-button-wrap">
|
||||
<input type="submit" class="sumo-button primary-button" name="upload" value="{{ _('Upload file') }}">
|
||||
<input type="submit" name="cancel" class="sumo-button kbox-cancel {% if form.instance.pk %} draft{% endif %}" data-action="{{ url('gallery.cancel_draft', media_type=type) }}" value="{{ _('Cancel') }}">
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
|
@ -74,7 +76,14 @@ What JS needs to do:
|
|||
TODO: better error messages ("invalid file" means too big, or extension, etc)
|
||||
|
||||
#}
|
||||
<div id="gallery-upload-modal" title="{% if has_draft %}{{ _('Continue Uploading Media') }}{% else %}{{ _('Upload a New Media File') }}{% endif %}" data-modal="true" data-target="#btn-upload" data-id="upload-kbox" data-position="none"
|
||||
<div
|
||||
class="hide-until-expanded"
|
||||
id="gallery-upload-modal"
|
||||
title="{% if has_draft %}{{ _('Continue Uploading Media') }}{% else %}{{ _('Upload a New Media File') }}{% endif %}"
|
||||
data-modal="true"
|
||||
data-target="#btn-upload"
|
||||
data-id="upload-kbox"
|
||||
data-position="none"
|
||||
data-max-image-size="{{ settings.IMAGE_MAX_FILESIZE }}">
|
||||
<form id="gallery-upload-image" class="upload-form{{ ' draft' if image_form.instance.pk else '' }}"
|
||||
data-post-url="{{ url('gallery.upload_async', media_type='image') }}"
|
||||
|
|
|
|||
|
|
@ -46,12 +46,26 @@
|
|||
<ol class="pagination cf">
|
||||
{% if page_obj.has_previous() %}
|
||||
<li class="prev">
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.previous_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-prev">{{_('Previous')}}</a>
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.previous_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-prev">
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline stroke="currentColor" stroke-width="2" points="15 5 8 12 15 19"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="sr-only">{{ _('Previous') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if page_obj.has_next() %}
|
||||
<li class="next">
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.next_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-next">{{_('Next')}}</a>
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.next_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-next">
|
||||
<span class="sr-only">{{ _('Next') }}</span>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline stroke="currentColor" stroke-width="2" points="9 19 16 12 9 5"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -30,12 +30,26 @@
|
|||
<ol class="pagination cf">
|
||||
{% if page_obj.has_previous() %}
|
||||
<li class="prev">
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.previous_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-prev">{{_('Previous')}}</a>
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.previous_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-prev">
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline stroke="currentColor" stroke-width="2" points="15 5 8 12 15 19"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="sr-only">{{ _('Previous') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if page_obj.has_next() %}
|
||||
<li class="next">
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.next_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-next">{{_('Next')}}</a>
|
||||
<a href="{{ pagination_base_url }}?page={{ page_obj.next_page_number() }}&sort={{current_sort}}" class="btn-page btn-page-next">
|
||||
<span class="sr-only">{{ _('Next') }}</span>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline stroke="currentColor" stroke-width="2" points="9 19 16 12 9 5"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ol>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,12 @@
|
|||
{% if pager.has_previous() %}
|
||||
<li class="prev">
|
||||
<a class="btn-page btn-page-prev" href="{{ pager.url|urlparams(page=pager.previous_page_number()) }}">
|
||||
{{ _('Previous') }}
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline stroke="currentColor" stroke-width="2" points="15 5 8 12 15 19"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="sr-only">{{ _('Previous') }}</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
|
@ -27,7 +32,12 @@
|
|||
{% if pager.has_next() %}
|
||||
<li class="next">
|
||||
<a class="btn-page btn-page-next" href="{{ pager.url|urlparams(page=pager.next_page_number()) }}">
|
||||
{{ _('Next') }}
|
||||
<span class="sr-only">{{ _('Next') }}</span>
|
||||
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline stroke="currentColor" stroke-width="2" points="9 19 16 12 9 5"></polyline>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,10 @@
|
|||
|
||||
.kbox-wrap {
|
||||
padding: 32px;
|
||||
|
||||
.hide-until-expanded {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#kbox-overlay {
|
||||
|
|
@ -72,3 +76,10 @@
|
|||
width: 100%;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
#upload-kbox {
|
||||
left: 50%;
|
||||
margin-left: -290px;
|
||||
top: 150px;
|
||||
width: 580px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,3 +14,40 @@
|
|||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 184px;
|
||||
max-height: 184px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-search {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.media-filters {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> * {
|
||||
width: 48%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче