[extensions-web/wip/tomtryf/redesign: 8/18] extensions: Rework layout of the extensions page
- From: Tom Tryfonidis <tomtryf src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [extensions-web/wip/tomtryf/redesign: 8/18] extensions: Rework layout of the extensions page
- Date: Thu, 23 Feb 2017 19:18:24 +0000 (UTC)
commit 7fae8fc64ad71bb4ae7e34a8e1802e592a6a6da5
Author: Tom Tryfonidis <tomtryf gnome org>
Date: Mon Feb 20 15:47:35 2017 +0200
extensions: Rework layout of the extensions page
.../extensions/templates/extensions/comments.html | 20 ++++----
.../extensions/templates/extensions/detail.html | 18 ++++---
.../templates/extensions/detail_edit.html | 8 ++--
sweettooth/ratings/templates/comments/form.html | 10 +++-
sweettooth/ratings/templates/comments/preview.html | 23 +++++----
sweettooth/static/css/sweettooth.css | 57 +++++++-------------
sweettooth/static/images/edit.svg | 36 ++++++++++++
sweettooth/static/js/main.js | 4 +-
8 files changed, 101 insertions(+), 75 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/comments.html
b/sweettooth/extensions/templates/extensions/comments.html
index 9bf24e6..e534617 100644
--- a/sweettooth/extensions/templates/extensions/comments.html
+++ b/sweettooth/extensions/templates/extensions/comments.html
@@ -1,16 +1,11 @@
-<div id="comments">
- <h4>User Reviews</h4>
- <div class="comments-holder"></div>
- <p class="loading">Loading reviews...</p>
-</div>
-<div id="opinion_form">
+<div id="opinion_form" class="col-sm-6 col-sm-push-6">
<h4>Your opinion</h4>
{% if request.user.is_authenticated %}
- <div class="comment_choice">
+ <div class="comment_choice btn-group btn-group-justified">
Leave a...
- <a href="javascript:void 0" id="leave_comment">Comment</a>
- <a href="javascript:void 0" id="leave_rating">Rating</a>
- <a href="{% url 'sweettooth.errorreports.views.report_error' pk=extension.pk %}">Bug report</a>
+ <a class="btn btn-default" href="javascript:void 0" id="leave_comment">Comment</a>
+ <a class="btn btn-default" href="javascript:void 0" id="leave_rating">Rating</a>
+ <a class="btn btn-default" href="{% url 'sweettooth.errorreports.views.report_error' pk=extension.pk
%}">Bug report</a>
</div>
<div id="rating_form">
{% load comments %}
@@ -22,3 +17,8 @@
</p>
{% endif %}
</div>
+<div id="comments" class="col-sm-6 col-sm-pull-6">
+ <h4>User Reviews</h4>
+ <div class="comments-holder"></div>
+ <p class="loading">Loading reviews...</p>
+</div>
diff --git a/sweettooth/extensions/templates/extensions/detail.html
b/sweettooth/extensions/templates/extensions/detail.html
index b3a9a88..b8b5cab 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -28,7 +28,7 @@
<div class="extension-details">
{% if extension.screenshot %}
{% block screenshot %}
- <div class="screenshot">
+ <div class="screenshot col-xs-12 col-sm-5 col-md-4 col-lg-3">
<a href="{{ extension.screenshot.url }}"><img src="{{ extension.screenshot.url }}" /></a>
</div>
{% endblock screenshot %}
@@ -37,14 +37,16 @@
{% endblock no-screenshot %}
{% endif %}
- <p class="description" id="extension_description">{{ extension.description }}</p>
+ <div class="col-xs-12 col-sm-7 col-md-8 col-lg-9">
+ <p class="description" id="extension_description">{{ extension.description }}</p>
- <dl>
- {% if extension.url %}
- <dt>Extension Homepage</dt>
- <dd><a href="{{ extension.url }}" id="extension_url">{{ extension.url }}</a></dd>
- {% endif %}
- </dl>
+ <dl>
+ {% if extension.url %}
+ <dt>Extension Homepage</dt>
+ <dd><a href="{{ extension.url }}" id="extension_url">{{ extension.url }}</a></dd>
+ {% endif %}
+ </dl>
+ </div>
</div>
{% if not is_visible %}
diff --git a/sweettooth/extensions/templates/extensions/detail_edit.html
b/sweettooth/extensions/templates/extensions/detail_edit.html
index 1adf654..63fe40f 100644
--- a/sweettooth/extensions/templates/extensions/detail_edit.html
+++ b/sweettooth/extensions/templates/extensions/detail_edit.html
@@ -52,19 +52,19 @@
{% endblock %}
{% block screenshot %}
- <div class="screenshot">
+ <div class="screenshot col-xs-12 col-sm-5 col-md-4 col-lg-3">
<a href="{{ extension.screenshot.url }}"><img src="{{ extension.screenshot.url }}"/></a>
<label class="upload">
- <span class="action_button">Upload screenshot</span>
+ <span class="action_button btn btn-primary">Upload screenshot</span>
<input type="file" accept="image/*">
</label>
</div>
{% endblock %}
{% block no-screenshot %}
- <div class="screenshot">
+ <div class="screenshot col-xs-12 col-sm-5 col-md-4 col-lg-3">
<label class="upload">
- <span class="action_button">Upload screenshot</span>
+ <span class="action_button btn btn-primary">Upload screenshot</span>
<input type="file" accept="image/*">
</label>
</div>
diff --git a/sweettooth/ratings/templates/comments/form.html b/sweettooth/ratings/templates/comments/form.html
index c8e1322..bd90421 100644
--- a/sweettooth/ratings/templates/comments/form.html
+++ b/sweettooth/ratings/templates/comments/form.html
@@ -1,6 +1,11 @@
{% load comments i18n %}
<form action="{% comment_form_target %}" method="post">{% csrf_token %}
{% if next %}<div><input type="hidden" name="next" value="{{ next }}" /></div>{% endif %}
+ <div class="rating text-center">
+ <p class="text-left"><strong>Rating</strong></p>
+ </div>
+ <p><strong>Summary</strong></p>
+ <p>{% trans "What do you think about this GNOME extension?" %}</p>
<p>{{ form.comment }}</p>
{% for field in form %}
{% ifnotequal field.name "comment" %}
@@ -16,10 +21,9 @@
{% endif %}
{% endifnotequal %}
{% endfor %}
- <div class="rating"></div>
<input type="hidden" name="show_rating" value="1" />
<p class="submit">
- <input type="submit" name="post" class="submit-post" value="{% trans "Post" %}"/>
- <input type="submit" name="preview" class="submit-preview" value="{% trans "Preview" %}"/>
+ <input type="submit" name="post" class="btn btn-default" value="{% trans "Post" %}"/> <br><br>
+ <input type="submit" name="preview" class="btn btn-primary" value="{% trans "Preview" %}"/>
</p>
</form>
diff --git a/sweettooth/ratings/templates/comments/preview.html
b/sweettooth/ratings/templates/comments/preview.html
index 9002af4..1ceda52 100644
--- a/sweettooth/ratings/templates/comments/preview.html
+++ b/sweettooth/ratings/templates/comments/preview.html
@@ -10,17 +10,22 @@
{% if next %}
<div><input type="hidden" name="next" value="{{ next }}"/></div>{% endif %}
{% if form.errors %}
- <h1>{% blocktrans count counter=form.errors|length %}Please correct the error below{% plural
%}Please
- correct the errors below{% endblocktrans %}</h1>
+ <h2>{% blocktrans count counter=form.errors|length %}Please correct the error below{% plural
%}Please
+ correct the errors below{% endblocktrans %}</h2>
{% else %}
- <h1>{% trans "Preview your comment" %}</h1>
+ <h2>{% trans "Preview your comment" %}</h2>
<blockquote>{{ comment|linebreaks }}</blockquote>
<p>
- {% trans "and" %} <input type="submit" name="submit" class="submit-post"
- value="{% trans "Post your comment" %}"
- id="submit"/> {% trans "or make changes" %}:
+ <input type="submit" name="submit" class="btn btn-default" value="{% trans "Post
Comment" %}" id="submit"/>
</p>
+ <hr>
+ <h2>{% trans "Edit your comment" %}:</h2>
{% endif %}
+ <p><strong>Rating</strong></p>
+ <div class="rating"></div>
+ <input type="hidden" name="show_rating" value="{{ form.data.show_rating }}" />
+ <p><strong>Summary</strong></p>
+ <p>{% trans "What do you think about this GNOME extension?" %}</p>
{% for field in form %}
{% ifnotequal field.name "rating" %}
{% if field.is_hidden %}
@@ -37,11 +42,9 @@
<input type="hidden" name="rating_initial" value="{{ field.value }}" />
{% endifnotequal %}
{% endfor %}
- <div class="rating"></div>
- <input type="hidden" name="show_rating" value="{{ form.data.show_rating }}" />
<p class="submit">
- <input type="submit" name="submit" class="submit-post" value="{% trans "Post" %}"/>
- <input type="submit" name="preview" class="submit-preview" value="{% trans "Preview" %}"/>
+ <input type="submit" name="submit" class="btn btn-default" value="{% trans "Post" %}"/>
+ <input type="submit" name="preview" class="btn btn-primary" value="{% trans "Preview" %}"/>
</p>
</form>
</div>
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 13df6ab..c1bade0 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -5,9 +5,9 @@
/* -> Action Button */
-
span.action_button {
font-weight: bold;
+ margin: 10px;
}
/* Unreviewed Extension Counter */
@@ -361,11 +361,9 @@ li.extension:last-child, #local_extensions div.extension:last-child {
}
.extension .description {
- margin: 0.5em 32px 0.5em 0.5em;
font-size: 1.2em;
overflow: auto;
white-space: pre-line;
- padding-left: 36px;
}
.extension textarea {
@@ -375,9 +373,6 @@ li.extension:last-child, #local_extensions div.extension:last-child {
}
.extension textarea, .extension input {
- border: 0;
- border-radius: 0;
-
line-height: 1.6;
font-size: 100%;
}
@@ -385,12 +380,9 @@ li.extension:last-child, #local_extensions div.extension:last-child {
/* Screenshots and Icons */
.extension .screenshot {
- margin-right: 0.5em;
- border: 1px solid #cccccc;
background: #ffffff;
- padding: 0.5em;
+ padding: 0.5em 0;
font-weight: bold;
- float: left;
}
.extension .screenshot img {
@@ -416,6 +408,12 @@ li.extension:last-child, #local_extensions div.extension:last-child {
display: block;
}
+@media screen and (max-width: 767px) {
+ .extension .screenshot {
+ text-align: center;
+ }
+}
+
/* Uploader */
.extension .upload {
@@ -518,12 +516,6 @@ li.extension:last-child, #local_extensions div.extension:last-child {
/* Comments */
/* ==================================================================== */
-#comments {
- width: 510px;
- float: left;
- margin-right: 30px;
-}
-
#comments .loading {
background-image: url(../images/spinner.gif);
background-repeat: no-repeat;
@@ -582,6 +574,9 @@ li.extension:last-child, #local_extensions div.extension:last-child {
z-index: 999;
}
+.comments-holder {
+ margin-top: 20px;
+}
/* Errors & Messages */
/* ==================================================================== */
@@ -628,28 +623,18 @@ p.message.warning {
}
.editable {
- background-color: rgba(255, 255, 200, 0.8);
+ background: url(../images/edit.svg) right rgba(255, 255, 200, 0.8) no-repeat;
+ padding-right: 20px;
}
/* Forms */
/* ==================================================================== */
input, textarea, input[type=submit], button {
- padding: 3px;
- border: 1px solid #999;
+ border: 1px solid #ccc;
border-radius: 4px;
- background-color: #fff;
}
-input[type=submit], button {
- background-color: #ddd;
- color: #444;
- padding: .2em 2em;
- font-weight: bold;
- padding: .1em 2em;
-}
-
-
/* Opinion form */
/* ==================================================================== */
@@ -661,10 +646,6 @@ input[type=submit], button {
display: block;
}
-#opinion_form .rating {
- float: left;
-}
-
#opinion_form p input,
#opinion_form p textarea {
width: 100%;
@@ -672,7 +653,8 @@ input[type=submit], button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 3px;
- border: 1px solid #888;
+ border: 1px solid #ccc;
+ border-radius: 4px;
}
#opinion_form p textarea {
@@ -687,13 +669,12 @@ input[type=submit], button {
#opinion_form .comment_choice {
display: block;
- height: 32px;
font-size: 16pt;
- background-repeat: no-repeat;
+ margin-bottom: 30px;
}
-#opinion_form .comment_choice a.selected {
- font-weight: bold;
+#opinion_form .comment_choice a {
+ text-decoration: none;
}
#opinion_form .unauthenticated {
diff --git a/sweettooth/static/images/edit.svg b/sweettooth/static/images/edit.svg
new file mode 100644
index 0000000..a3c4dc2
--- /dev/null
+++ b/sweettooth/static/images/edit.svg
@@ -0,0 +1,36 @@
+<?xml version='1.0' encoding='UTF-8' standalone='no'?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg xmlns:cc='http://creativecommons.org/ns#' xmlns:dc='http://purl.org/dc/elements/1.1/'
sodipodi:docname='document-edit-symbolic.svg'
inkscape:export-filename='/home/sam/dev/RESOURCES/gnome-icon-theme-symbolic/src/gnome-stencils.png'
inkscape:export-xdpi='90' inkscape:export-ydpi='90' height='16' id='svg7384'
xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape'
xmlns:osb='http://www.openswatchbook.org/uri/2009/osb'
xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns#'
xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg'
version='1.1' inkscape:version='0.91 r13725' width='16' xmlns='http://www.w3.org/2000/svg'>
+ <metadata id='metadata90'>
+ <rdf:RDF>
+ <cc:Work rdf:about=''>
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/>
+ <dc:title>Gnome Symbolic Icon Theme</dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <sodipodi:namedview inkscape:bbox-nodes='true' inkscape:bbox-paths='true' bordercolor='#666666'
borderopacity='1' inkscape:current-layer='layer12' inkscape:cx='-112.38968' inkscape:cy='133.96583'
gridtolerance='10' inkscape:guide-bbox='true' guidetolerance='10' id='namedview88'
inkscape:object-nodes='true' inkscape:object-paths='false' objecttolerance='10' pagecolor='#3a3b39'
inkscape:pageopacity='1' inkscape:pageshadow='2' showborder='false' showgrid='false' showguides='true'
inkscape:snap-bbox='true' inkscape:snap-bbox-midpoints='false' inkscape:snap-global='false'
inkscape:snap-grids='true' inkscape:snap-nodes='false' inkscape:snap-others='false'
inkscape:snap-to-guides='true' inkscape:window-height='1376' inkscape:window-maximized='1'
inkscape:window-width='2560' inkscape:window-x='0' inkscape:window-y='27' inkscape:zoom='4'>
+ <inkscape:grid dotted='false' empspacing='2' enabled='true' id='grid4866' originx='-159.9838'
originy='549.98573' snapvisiblegridlinesonly='true' spacingx='1px' spacingy='1px' type='xygrid'
visible='true'/>
+ </sodipodi:namedview>
+ <title id='title9167'>Gnome Symbolic Icon Theme</title>
+ <defs id='defs7386'>
+ <linearGradient
gradientTransform='matrix(-2.7365795,0.28202934,-0.18908311,-0.99988321,239.54008,-879.45557)'
id='linearGradient19282' osb:paint='solid'>
+ <stop id='stop19284' offset='0' style='stop-color:#666666;stop-opacity:1;'/>
+ </linearGradient>
+ </defs>
+ <g inkscape:groupmode='layer' id='layer9' inkscape:label='status' style='display:inline'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='layer10' inkscape:label='devices' style='display:inline'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='layer11' inkscape:label='apps'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='layer13' inkscape:label='places' style='display:inline'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='layer14' inkscape:label='mimetypes'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='layer15' inkscape:label='emblems' style='display:inline'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='g71291' inkscape:label='emotes' style='display:inline'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='g4953' inkscape:label='categories' style='display:inline'
transform='translate(-400.984,-766.98573)'/>
+ <g inkscape:groupmode='layer' id='layer12' inkscape:label='actions' style='display:inline'
transform='translate(-400.984,-766.98573)'>
+
+ <path inkscape:connector-curvature='0' d='m 403.66263,777.27842 5.84933,-5.85075 2.99982,2.99981
-5.82888,5.87306 -4.02677,1.07184 z' id='path13107' sodipodi:nodetypes='cccccc'
style='fill:#bebebe;fill-opacity:1;fill-rule:evenodd;stroke:none'/>
+ <path inkscape:connector-curvature='0' d='m 412.62129,768.66211 c -0.20052,0 -0.40103,0.0768
-0.55468,0.23047 l -1.76953,1.76758 3.05273,3.05273 1.76953,-1.76953 c 0.3073,-0.3073 0.3073,-0.80208
0,-1.10938 l -1.94336,-1.9414 c -0.15365,-0.15365 -0.35417,-0.23047 -0.55469,-0.23047 z' id='rect9831'
style='color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#bebebe;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;marker-start:none;marker-mid:none;marker-end:none;paint-order:normal;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate'/>
+ </g>
+</svg>
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index 78d0728..26da94b 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -132,8 +132,8 @@ function($, messages, modal, hashParamUtils, templates, staticfiles) {
function makeShowForm(isRating) {
return function() {
- $('#leave_comment, #leave_rating').removeClass('selected');
- $(this).addClass('selected');
+ $('#leave_comment, #leave_rating').removeClass('active');
+ $(this).addClass('active');
var $rating = $('#rating_form').slideDown().find('.rating');
if (isRating)
{
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
