Commit 169aed61 authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt

refactor icons

* replace fa icon references with semantic sg descriptors
* only include necessary parts of font-awesome
* add missing size modifiers
parent 28af56a7
{% random STADTGESTALTEN_CLAIMS as claim %}
{% if claim %}
<div class="breadcrumb claim">
<i class="fa fa-bullhorn"></i>
<i class="sg sg-claim"></i>
<span>{{ claim }}</span>
</div>
{% endif %}
......@@ -24,7 +24,7 @@
Besondere Formatierungen lassen sich mit den Knöpfen oben erzeugen.
{% endif %}
Erläuterungen gibt es in der
<a href="/stadt/markdown/"><i class="fa fa-question-circle">&nbsp;</i>Hilfe zur Textauszeichnung</a>.
<a href="/stadt/markdown/"><i class="sg sg-info">&nbsp;</i>Hilfe zur Textauszeichnung</a>.
</p>
</div>
{% block form_extra %}{% endblock %}
......
......@@ -21,7 +21,7 @@
<div class="account-actions">
<a href="{% provider_login_url 'facebook' %}"
class="btn btn-link">
<span class="fa fa-facebook"></span>
<span class="sg sg-facebook"></span>
Mit Facebook anmelden
</a>
</div>
......
......@@ -18,7 +18,7 @@
{% if can_edit %}
<div class="btn-toolbar btn-toolbar-bottom btn-toolbar-fixed">
<a href="{% url 'image-settings' %}" class="btn btn-backdrop btn-ts" title="Hintergrundbild ändern">
<i class="fa fa-2x fa-camera"></i>
<i class="sg sg-2x sg-camera"></i>
</a>
</div>
{% endif %}
......@@ -78,7 +78,7 @@
<button type="button" class="btn-text hide-no-js" data-component="clipboard"
data-clipboard-text="{{ site.domain }}/gestalt/{{ gestalt.user.username }}"
title="URL zu dieser Gestalt kopieren">
<i class="fa fa-clipboard"></i>
<i class="sg sg-copy"></i>
</button>
</dd>
</dl>
......
......@@ -13,7 +13,7 @@
</div>
{% else %}
<div class="disclaimer">
<i class="fa fa-5x fa-image"></i><br />
<i class="sg sg-5x sg-image"></i><br />
<p>Diese Gruppe war bisher nicht motiviert eine Introgalerie anzulegen.</p>
{% load rules %}
{% has_perm 'memberships.join_group' user group as can_join %}
......@@ -31,11 +31,11 @@
<div class="btn-toolbar btn-toolbar-bottom btn-toolbar-fixed">
{% if intro_gallery %}
<a class="btn btn-backdrop btn-ts" href="{{ intro_gallery.get_absolute_url }}" title="Introgalerie anzeigen">
<i class="fa fa-2x fa-camera"></i>
<i class="sg sg-2x sg-camera"></i>
</a>
{% else %}
<a class="btn btn-backdrop btn-ts" href="{% url 'create-group-gallery' group.slug %}?pinned=1&amp;public=1&amp;text=Introgalerie%20der%20Gruppe%20%40{{ group.slug|urlencode }}&amp;title={{ group|urlencode }}" title="Introgalerie anlegen">
<i class="fa fa-2x fa-camera"></i>
<i class="sg sg-2x sg-camera"></i>
</a>
{% endif %}
</div>
......
......@@ -20,7 +20,7 @@
<label class="action" for="sg-help-group">
<span class="action-inner">
<span class="action-icon">
<i class="fa fa-users"></i>
<i class="sg sg-intro-group"></i>
</span>
<span class="action-description">
Deine Gruppe jetzt!
......@@ -32,7 +32,7 @@
<label class="action" for="sg-help-local">
<span class="action-inner">
<span class="action-icon">
<i class="fa fa-anchor"></i>
<i class="sg sg-intro-local"></i>
</span>
<span class="action-description">
Für {{ town_name }}
......@@ -44,7 +44,7 @@
<label class="action" for="sg-help-privacy">
<span class="action-inner">
<span class="action-icon">
<i class="fa fa-heart"></i>
<i class="sg sg-intro-privacy"></i>
</span>
<span class="action-description">
Ohne Schabernack
......@@ -56,7 +56,7 @@
<label class="action" for="sg-help-participate">
<span class="action-inner">
<span class="action-icon">
<i class="fa fa-road"></i>
<i class="sg sg-intro-participate"></i>
</span>
<span class="action-description">
Du bestimmst!
......
......@@ -30,7 +30,7 @@
{% else %}
<div class="alert alert-flex alert-default">
<div class="alert-image">
<i class="fa fa-3x fa-meh-o"></i>
<i class="sg sg-3x sg-no-results"></i>
</div>
<div>
<p>Leider haben wir keine passenden Beiträge für deine Suchanfrage gefunden.</p>
......
......@@ -186,8 +186,8 @@
z-index: 10;
&:after {
.sg();
content: @fa-var-pencil;
.fa-icon();
position: absolute;
left: 50%;
top: 50%;
......
......@@ -108,8 +108,8 @@
border-color: @color-primary;
&::after {
.sg();
@size: 1.75em;
.fa-icon();
content: @fa-var-check;
position: absolute;
right: (@size / -2);
......@@ -353,7 +353,7 @@
}
.btn-more {
&:extend(.sg);
.sg();
&::after {
content: @fa-var-ellipsis-h;
......@@ -365,7 +365,7 @@
padding-right: 3.25em;
&:after {
.fa-icon();
.sg();
content: @fa-var-check;
width: 2.5em;
text-align: center;
......
......@@ -127,7 +127,7 @@
}
.carousel-btn-icon {
.fa();
.sg();
font-size: 1.3rem;
line-height: 1;
......
......@@ -21,7 +21,7 @@
&:after,
&:before {
&:extend(.sg);
.sg();
position: absolute;
right: 0;
margin-right: .75em;
......
......@@ -109,7 +109,7 @@
}
.caret {
.fa-icon();
.sg();
&:before {
content: @fa-var-caret-down;
......
......@@ -68,6 +68,18 @@
.editor-container:not(.editor-container-active) & {
transform: none !important;
}
.sg-editor-hx::after {
font-family: @font-family-default;
font-size: .65em;
vertical-align: text-bottom;
position: relative;
top: 2px;
}
.sg-editor-h2::after {
content: '2';
}
}
.editor-images {
......
......@@ -183,7 +183,7 @@ label {
&:before,
&:after {
.fa-icon();
.sg();
position: absolute;
right: 1.5rem;
top: 50%;
......
.sg {
.fa();
.sg-xl {
font-size: 1.5rem;
}
.sg-2x {
.fa-2x();
.sg-2x,
.sg-xxl {
font-size: 2rem;
}
.sg-fw {
.fa-fw();
.sg-3x {
font-size: 3rem;
}
.sg-4x {
font-size: 4rem;
}
.sg-5x {
font-size: 5rem;
}
.sg-active {
color: @color-primary;
color: @color-primary !important;
}
.sg-icon(@selector, @font-awesome-name) {
.sg-@{selector}::after {
content: @font-awesome-name;
.sg-icon(@selector, @font-awesome-var, @position: after, @extensions: false) {
.sg-@{selector} when (@extensions) {
@extensions();
}
.sg-@{selector}:@{position} {
content: @font-awesome-var;
}
}
.sg-icon(camera, @fa-var-camera);
.sg-icon(add, @fa-var-plus);
.sg-icon(address, @fa-var-map-marker);
.sg-icon(info, @fa-var-info-circle);
.sg-icon(info, @fa-var-info-circle, before);
.sg-icon(home, @fa-var-home);
.sg-icon(author, @fa-var-user);
.sg-icon(group, @fa-var-users);
......@@ -32,17 +45,6 @@
.sg-icon(closed, @fa-var-user-secret);
.sg-icon(comments, @fa-var-comments-o);
.sg-icon(conversations, @fa-var-comments-o);
.sg-icon(article, @fa-var-file-text-o);
.sg-icon(content-type-article, @fa-var-file-text-o);
.sg-icon(event, @fa-var-calendar-o);
.sg-icon(content-type-event, @fa-var-calendar-o);
.sg-icon(gallery, @fa-var-picture-o);
.sg-icon(content-type-gallery, @fa-var-picture-o);
.sg-icon(conversations, @fa-var-comments-o);
.sg-icon(gestalt, @fa-var-user);
.sg-icon(content-type-gestalt, @fa-var-user);
.sg-icon(poll, @fa-var-thumbs-o-up);
.sg-icon(content-type-poll, @fa-var-thumbs-o-up);
.sg-icon(edit, @fa-var-pencil);
.sg-icon(pen, @fa-var-pencil);
.sg-icon(foundation, @fa-var-flag);
......@@ -82,10 +84,66 @@
.sg-icon(time, @fa-var-clock-o);
.sg-icon(copy, @fa-var-clipboard);
.sg-icon(download, @fa-var-download);
.sg-icon(preview, @fa-var-eye);
.sg-icon(remove, @fa-var-trash-o);
.sg-icon(attachment, @fa-var-paperclip);
.sg-icon(winner, @fa-var-star);
.sg-icon(tools, @fa-var-puzzle-piece);
.sg-icon(search, @fa-var-search);
.sg-icon(password, @fa-var-key);
.sg-icon(privacy-public, @fa-var-globe);
.sg-icon(privacy-private, @fa-var-lock);
.sg-icon(claim, @fa-var-bullhorn);
.sg-icon(no-results, @fa-var-meh-o);
.sg-icon(facebook, @fa-var-facebook);
.sg-icon(image, @fa-var-image);
// utility icons
.sg-icon(increase, @fa-var-plus);
.sg-icon(decrease, @fa-var-minus);
.sg-icon(order-up, @fa-var-chevron-up);
.sg-icon(order-down, @fa-var-chevron-down);
.sg-icon(sortorder-publication, @fa-var-list-ol);
.sg-icon(sortorder-upcoming, @fa-var-calendar-o);
// editor icons
.sg-icon(editor-bold, @fa-var-bold);
.sg-icon(editor-italic, @fa-var-italic);
.sg-icon(editor-undo, @fa-var-undo);
.sg-icon(editor-redo, @fa-var-repeat);
.sg-icon(editor-quote, @fa-var-quote-left);
.sg-icon(editor-ul, @fa-var-list-ul);
.sg-icon(editor-ol, @fa-var-list-ol);
.sg-icon(editor-h1, @fa-var-header, before);
.sg-icon(editor-h2, @fa-var-header, before);
.sg-icon(editor-link, @fa-var-link);
.sg-icon(editor-image, @fa-var-image);
.sg-icon(editor-preview, @fa-var-eye, after);
.sg.active { &:extend(.sg-active); } // editor icon states
// poll icons
.sg-icon(poll-info, @fa-var-lightbulb-o);
.sg-icon(poll-favorite, @fa-var-heart);
.sg-icon(poll-vote-yes, @fa-var-thumbs-up);
.sg-icon(poll-vote-maybe, @fa-var-question);
.sg-icon(poll-vote-no, @fa-var-thumbs-down);
.sg-icon(poll-votetype-simple, @fa-var-thumbs-up);
.sg-icon(poll-votetype-condorcet, @fa-var-commenting-o);
// content type icons
.sg-icon(content-type-article, @fa-var-file-text-o);
.sg-icon(content-type-event, @fa-var-calendar-o);
.sg-icon(content-type-gallery, @fa-var-picture-o);
.sg-icon(content-type-gestalt, @fa-var-user);
.sg-icon(content-type-poll, @fa-var-thumbs-o-up);
.sg-icon(article, @fa-var-file-text-o);
.sg-icon(event, @fa-var-calendar-o);
.sg-icon(gallery, @fa-var-picture-o);
.sg-icon(conversations, @fa-var-comments-o);
.sg-icon(gestalt, @fa-var-user);
.sg-icon(poll, @fa-var-thumbs-o-up);
// intro icons
.sg-icon(intro-group, @fa-var-users);
.sg-icon(intro-local, @fa-var-anchor);
.sg-icon(intro-privacy, @fa-var-heart);
.sg-icon(intro-participate, @fa-var-road);
......@@ -32,7 +32,7 @@
}
&:after {
.fa-icon();
.sg();
content: @fa-var-check;
background-color: fadeout(@brand-success, 40%);
color: white;
......
......@@ -157,7 +157,7 @@
margin-left: 1rem;
}
.fa-heart {
.sg-poll-favorite {
color: crimson;
}
......
// import fontawesome completely
@import "../../../node_modules/font-awesome/less/font-awesome";
@fa-base-path: "../../../node_modules/font-awesome/less";
// includes all less variables and overwrite what’s necessary
@import "@{fa-base-path}/variables.less";
@fa-css-prefix: sg;
// includes the font
@import "@{fa-base-path}/path.less";
// defines the base class
@import "@{fa-base-path}/core.less";
// defines the fixed-width class
@import "@{fa-base-path}/fixed-width.less";
// includes pulse and spin animations
@import "@{fa-base-path}/animated.less";
......@@ -5,7 +5,7 @@
<template v-for="action in actions">
<button type="button" class="btn btn-icon btn-sm" :aria-pressed="action.pressed"
:title="action.title" @click="select(action.value)">
<i class="fa" :class="`fa-${action.icon}`"></i>
<i class="sg" :class="`sg-${action.icon}`"></i>
</button>
</template>
</div>
......@@ -20,13 +20,13 @@
actions () {
return [
{
icon: 'list-ol',
icon: 'sortorder-publication',
value: 'all',
pressed: this.value === 'all' ? 'true' : 'false',
title: 'Alle Beiträge sortiert nach Veröffentlichungszeit'
},
{
icon: 'calendar-o',
icon: 'sortorder-upcoming',
value: 'events',
pressed: this.value === 'events' ? 'true' : 'false',
title: 'Kommende Veranstaltungen sortiert nach Veranstaltungsdatum'
......
......@@ -3,11 +3,11 @@
<div class="numspi-inner">
<div class="numspi-ctl">
<button type="button" class="numspi-btn" @click="modifyValue(-1)" :disabled="!allowDecrement">
<i class="fa fa-minus"></i>
<i class="sg sg-decrease"></i>
</button>
<input class="numspi-input" type="number" :min="min" :max="max" :step="step" v-model.number="currentValue" :id="id">
<button type="button" class="numspi-btn" @click="modifyValue(1)" :disabled="!allowIncrement">
<i class="fa fa-plus"></i>
<i class="sg sg-increase"></i>
</button>
</div>
</div>
......
......@@ -71,14 +71,14 @@
{
value: 'simple',
name: 'Meiste Stimmen',
icon: 'fa-thumbs-up',
icon: 'poll-votetype-simple',
description: `Es wird mit Ja, Nein und Vielleicht abgestimmt. Der Vorschlag mit
den meisten Ja-Stimmen gewinnt. Super für Termine und klare Entscheidungen.`
},
{
value: 'condorcet',
name: 'Größte Gemeinsamkeit (Condorcet)',
icon: 'fa-commenting-o',
icon: 'poll-votetype-condorcet',
description: `Antworten werden nach Vorliebe geordnet. Vorschläge mit dem größten
Konsens gewinnen. Gut für Richtungsentscheidungen und Stimmungsbilder.`
}
......
......@@ -4,7 +4,7 @@
<strong class="poll-answer-name">{{ option.title }}</strong>
<figure class="poll-answer-voters" v-if="option.voters.length > 0">
<figcaption>
<i class="fa fa-heart" title="Favorisiert von"></i>
<i class="sg sg-poll-favorite" title="Favorisiert von"></i>
</figcaption>
<ul class="avatars avatars-nowrap">
<li v-for="voter in option.voters">
......
......@@ -37,12 +37,12 @@
<button type="button" class="btn btn-default btn-sm" :disabled="index === 0"
title="Diese Option weiter nach oben sortieren"
@click="_moveOption(option.id, -1)">
<i class="fa fa-chevron-up"></i>
<i class="sg sg-order-up"></i>
</button>
<button type="button" class="btn btn-default btn-sm" :disabled="index + 1 === rankedOptions.length"
title="Diese Option weiter nach unten sortieren"
@click="_moveOption(option.id, +1)">
<i class="fa fa-chevron-down"></i>
<i class="sg sg-order-down"></i>
</button>
</div>
</poll-voter-answer>
......
......@@ -72,9 +72,9 @@
return {
endorsements: null,
icons: {
yes: 'fa fa-thumbs-up',
no: 'fa fa-thumbs-down',
maybe: 'fa fa-question'
yes: 'sg sg-poll-vote-yes',
no: 'sg sg-poll-vote-no',
maybe: 'sg sg-poll-vote-maybe'
}
}
},
......
<template>
<div class="poll" :class="{ 'poll-voting': isVoting, 'poll-loading': !poll }">
<header class="poll-header">
<i class="poll-header-icon fa fa-lightbulb-o" v-if="isVoting"></i>
<i class="poll-header-icon sg sg-poll-info" v-if="isVoting"></i>
<slot name="header">
<div class="poll-info">
<div>{{ headerText }}</div>
......
......@@ -4,7 +4,7 @@
<div class="controls">
<sg-configurator id="event-time" @save="propagate" @show="configure">
<span slot="label">{{ label }}</span>
<i slot="icon" class="fa fa-clock-o"></i>
<i slot="icon" class="sg sg-time"></i>
<span slot="title">
Wann findet die Veranstaltung statt?
</span>
......
......@@ -26,7 +26,7 @@ export default (el) => {
<div class="disclaimer disclaimer-info">
<button class="btn-text btn-text-light pull-right">
<i class="fa fa-times"></i>
<i class="sg sg-close"></i>
</button>
<div class="container">
......
......@@ -45,84 +45,84 @@ export default (el, SimpleMDE) => ({
{
name: 'undo',
action: SimpleMDE.undo,
className: 'fa fa-undo no-disable',
className: 'sg sg-editor-undo no-disable',
title: 'Rückgängig'
},
{
name: 'redo',
action: SimpleMDE.redo,
className: 'fa fa-repeat no-disable',
className: 'sg sg-editor-redo no-disable',
title: 'Wiederholen'
},
'|',
{
name: 'italic',
action: SimpleMDE.toggleItalic,
className: 'fa fa-italic',
className: 'sg sg-editor-italic',
title: 'Kursiv'
},
{
name: 'bold',
action: SimpleMDE.toggleBold,
className: 'fa fa-bold',
className: 'sg sg-editor-bold',
title: 'Fett'
},
'|',
{
name: 'blockquote',
action: SimpleMDE.toggleBlockquote,
className: 'fa fa-quote-left',
className: 'sg sg-editor-quote',
title: 'Zitat'
},
{
name: 'unordered-list',
action: SimpleMDE.toggleUnorderedList,
className: 'fa fa-list-ul',
className: 'sg sg-editor-ul',
title: 'Einfache Liste'
},
{
name: 'ordered-list',
action: SimpleMDE.toggleOrderedList,
className: 'fa fa-list-ol',
className: 'sg sg-editor-ol',
title: 'Nummerierte Liste'
},
'|',
{
name: 'heading-1',
action: SimpleMDE.toggleHeading1,
className: 'fa fa-header',
className: 'sg sg-editor-h1',
title: 'Überschrift'
},
{
name: 'heading-2',
action: SimpleMDE.toggleHeading2,
className: 'fa fa-header fa-header-x fa-header-2',
className: 'sg sg-editor-h2 sg-editor-hx',
title: 'Unterüberschrift'
},
'|',
{
name: 'link',
action: SimpleMDE.drawLink,
className: 'fa fa-link',
className: 'sg sg-editor-link',
title: 'Link/Verweis'
},
{
name: 'image',
className: 'fa fa-picture-o',
className: 'sg sg-editor-image',
title: 'Bild'
},
'|',
{
name: 'preview',
action: SimpleMDE.togglePreview,
className: 'sg sg-preview no-disable',
className: 'sg sg-editor-preview no-disable',
title: 'Vorschau'
},
{
name: 'guide',
action: '/stadt/markdown',
className: 'fa fa-question-circle',
className: 'sg sg-info',
title: 'Möglichkeiten der Textauszeichnung'
}
]
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment