From 266f4a6a663b3765d53132d67ddf1f42c19ff43d Mon Sep 17 00:00:00 2001 From: pinkiebell Date: Sun, 15 Jul 2018 19:00:42 +0200 Subject: [PATCH 1/5] UI Inventory Fixes #1755 --- app/app/urls.py | 1 + app/assets/v2/css/rain.css | 4 + app/assets/v2/css/tabs.css | 50 ++ app/assets/v2/js/pages/tabs.js | 38 ++ app/retail/templates/ui_inventory.html | 818 +++++++++++++++++++++++++ app/retail/views.py | 9 + docs/CONTRIBUTING.md | 4 + 7 files changed, 924 insertions(+) create mode 100644 app/assets/v2/css/tabs.css create mode 100644 app/assets/v2/js/pages/tabs.js create mode 100644 app/retail/templates/ui_inventory.html diff --git a/app/app/urls.py b/app/app/urls.py index 6b2b8f2f10d..3c509b06a57 100644 --- a/app/app/urls.py +++ b/app/app/urls.py @@ -181,6 +181,7 @@ re_path(r'^about/?', retail.views.about, name='about'), re_path(r'^mission/?', retail.views.mission, name='mission'), re_path(r'^vision/?', retail.views.vision, name='vision'), + re_path(r'^ui/?', retail.views.ui, name='ui'), re_path(r'^results/?(?P.*)/?', retail.views.results, name='results_by_keyword'), re_path(r'^results/?', retail.views.results, name='results'), re_path(r'^activity/?', retail.views.activity, name='activity'), diff --git a/app/assets/v2/css/rain.css b/app/assets/v2/css/rain.css index 21400bc4b92..2ceec7dda4b 100644 --- a/app/assets/v2/css/rain.css +++ b/app/assets/v2/css/rain.css @@ -38,6 +38,10 @@ background: #f1e1e1; } +.rain.purple { + background-color: var(--gc-purple); +} + .rain:nth-of-type(1) { animation-name: rain-1; animation-delay: 3s; diff --git a/app/assets/v2/css/tabs.css b/app/assets/v2/css/tabs.css new file mode 100644 index 00000000000..74045293836 --- /dev/null +++ b/app/assets/v2/css/tabs.css @@ -0,0 +1,50 @@ + +.tab-container { + position: relative; + display: block; + text-align: center; +} + +.tab-container > button { + margin: 0 5px; +} + +.section-tab { + background: transparent; + outline: none; + border: none; + cursor: pointer; + color: var(--gc-purple); + padding: 0; +} + +.tab-indicator { + display: block; + height: 5px; + width: 20px; + background: var(--gc-blue); + transition: transform .3s, left .3s; +} + +.section-tab:hover, +.section-tab:active, +.section-tab:focus { + color: var(--gc-blue) !important; +} + +.section-tab.active { + color: var(--gc-blue); +} + +.tab-sections { + width: 100%; + position: relative; + transition: transform .3s; +} + +.tab-section { + width: 100%; + padding: 0 2rem; + margin: 0 1rem; + flex-shrink: 0; +} diff --git a/app/assets/v2/js/pages/tabs.js b/app/assets/v2/js/pages/tabs.js new file mode 100644 index 00000000000..d5ffa1dca4f --- /dev/null +++ b/app/assets/v2/js/pages/tabs.js @@ -0,0 +1,38 @@ + +function setupTabs(name) { + var indicator = document.querySelector(name + '.tab-indicator'); + var container = indicator.parentElement.parentElement; + var sections = container.querySelector(name + '.tab-sections'); + var buttons = indicator.previousElementSibling; + var firstButton = null; + var last = null; + + function onClick(evt) { + var width = evt.target.offsetWidth; + var offset = evt.target.offsetLeft; + var section = sections.querySelector('#' + evt.target.id); + + indicator.style.width = width + 'px'; + indicator.style.transform = 'translateX(' + offset + 'px)'; + + if (last) { + last.className = last.className.replace(' active', ''); + } + + evt.target.className += ' active'; + offset = -section.offsetLeft; + sections.style.transform = 'translateX(' + offset + 'px)'; + last = evt.target; + } + + while (buttons !== null) { + buttons.addEventListener('click', onClick, false); + + firstButton = buttons; + buttons = buttons.previousElementSibling; + if (buttons === null) { + // initial setup + onClick({ target: firstButton }); + } + } +} diff --git a/app/retail/templates/ui_inventory.html b/app/retail/templates/ui_inventory.html new file mode 100644 index 00000000000..73aeea63374 --- /dev/null +++ b/app/retail/templates/ui_inventory.html @@ -0,0 +1,818 @@ +{% comment %} +Copyright (C) 2018 Gitcoin Core + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as published +by the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not,see +. + +{% endcomment %} +{% load i18n static %} + + + {% include 'shared/head.html' %} + + + + + + {% include 'shared/tag_manager_2.html' %} +
+ {% include 'shared/minihero.html' with h1='UI Inventory' position_h1_below_logo=1 %} +
+ + + + +
+
+

{% trans "Buttons" %}

+
+

btn btn-gc-..

+
+ + ..blue + +
+
+ + ..purple + +
+
+ + ..green + +
+
+ +
+

btn btn-outline-gc-..

+
+ + ..blue + +
+
+ + ..purple + +
+
+ + ..green + +
+
+ +
+

btn btn-..

+
+ + ..info + +
+
+ + ..warning + +
+
+ + ..success + +
+
+ +
+

btn btn-gc-purple pulseButton

+
pulseButton
+
+
+ +
+

+ {% trans "Colors" %} +

+
+

text-highlight-purple

+

text-highlight-green

+

text-highlight-dark-blue

+

text-highlight-gc-purple

+

text-highlight-gc-blue

+

text-highlight-light-blue

+

text-highlight-pink

+
+
+ class="card p-1 bg-dark text-highlight-green" +

text-light

+
+
+ class="card p-1 bg-light text-highlight-green" +

text-dark

+
+
class="card p-1 bg-white text-highlight-green"
+
+ +
+

Typography

+
+

h1

+

h2

+

h3

+

h4

+

h5

+

h6

+
+ +
+

font-title-lg

+

font-title

+

font-header

+

font-subheader

+

font-body

+

font-caption

+
+ +
+

font-bigger-1

+

font-bigger-2

+

font-bigger-3

+

font-bigger-4

+
+ +
+

font-smaller-1

+

font-smaller-2

+

font-smaller-3

+

font-smaller-4

+

font-smaller-5

+

font-smaller-6

+

font-smaller-7

+
+
+ +
+

Tabs

+
+ + + +
+
+ +
+
+
+
+

One

+
+
+
+
+
+
+

Two

+
+
+
+
+
+
+

Three

+
+
+
+
+
+ +
+

{% trans "Carousel" %}

+
+
+
+
+

{% trans "Slide One" %}

+
+ +
+

{% trans "Slide Two" %}

+
+
+
+
+
+ +
+

{% trans "Forms" %}

+
+ + + +
+ + +
+ +
+
+
+
+ + +
+
+ +
+

{% trans "Banner" %}

+
+
+
+ {% trans "info" %} +
+
+ × +
+
+
+
+ {% trans "warning" %} +
+
+ × +
+
+
+
+ {% trans "error" %} +
+
+ × +
+
+ +
+

{% trans "Animations" %}

+
+
+
+ +
+
+
+
+ +
+
+
+ +

{% trans "Other whole page animations" %}

+

include 'shared/rain.html' with class="purple"

+ {% include 'shared/rain.html' with class="purple" %} + + +
+ +
+

{% trans "Other Elements" %}

+
+

progress-bar

+ + + +
+
+

{% trans "Quotes" %} | waitingRoomEntertainment()

+

+

+
+
+ +
+

{% trans "Header" %}

+

include 'shared/minihero.html' with h1='shared/minihero.html'

+
+ {% include 'shared/minihero.html' with h1='shared/minihero.html' %} +
+

include 'shared/hero.html' with h1='shared/hero.html'

+
+ {% include 'shared/hero.html' with h1='shared/hero.html' %} +
+
+ +
+

{% trans "Modal Dialog" %}

+
+
+ + + +
+
+
{% trans "Modal Dialog" %}
+
+
+
+ +
+

{% trans "Iconography" %}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

{% trans "Static Assets" %}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + {% include 'shared/footer.html' %} + {% include 'shared/analytics.html' %} + {% include 'shared/footer_scripts.html' with slideDurationInMs=3000 %} + {% include 'shared/rollbar.html' %} + {% include 'shared/messages.html' %} + + + + + + + + diff --git a/app/retail/views.py b/app/retail/views.py index d1cb62223be..d4fceb582b4 100644 --- a/app/retail/views.py +++ b/app/retail/views.py @@ -1020,3 +1020,12 @@ def tokens(request): key = f"{network}_tokens" context[key] = Token.objects.filter(network=network, approved=True) return TemplateResponse(request, 'tokens_js.txt', context, content_type='text/javascript') + + +def ui(request): + context = { + 'is_outside': True, + 'active': 'ui_inventory ', + 'title': 'UI Inventory', + } + return TemplateResponse(request, 'ui_inventory.html', context) diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index 83c712ab351..7132f564db7 100644 --- a/docs/CONTRIBUTING.md +++ b/docs/CONTRIBUTING.md @@ -74,6 +74,10 @@ User facing copy / text should be run through [Django Translation Framework](htt 4. each of the models `help_text`s are internationalized 5. as are all the emails in `marketing/mails.py` +Take a look at /ui (ui_inventory.html), for a quick reference of user interface components. +If you are contributing user-facing assets, interface components or other relevant visuals, +then please add them to our UI Inventory page. + ### Step 1: Fork Fork the project [on GitHub](https://github.com/gitcoinco/web) and clone your From 4d5c6a68a9fc97e835ae90274f79021b1059b7f5 Mon Sep 17 00:00:00 2001 From: pinkiebell Date: Wed, 18 Jul 2018 19:45:06 +0200 Subject: [PATCH 2/5] UI Inventory Improve the code viewer and give the user a hint. --- app/retail/templates/ui_inventory.html | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/app/retail/templates/ui_inventory.html b/app/retail/templates/ui_inventory.html index 73aeea63374..2108c147efc 100644 --- a/app/retail/templates/ui_inventory.html +++ b/app/retail/templates/ui_inventory.html @@ -38,9 +38,6 @@ max-width: 8em; margin: 0.1em; } - .alert { - position: relative; - } .inventory { max-width: 960px; margin: 0 auto; @@ -62,6 +59,10 @@ overflow: scroll; z-index: 9999999; } + code { + color: #e83e8c !important; + word-break: break-word !important; + }