2025-summer/team-3
12
Fork 0
Code Issues Pull requests Projects Releases Activity

replaced material icons with material symbols

Browse source
This commit is contained in:
Jenny Danzmayr 2023-12-25 15:42:54 +01:00
parent 3e9933890d
commit e8944b9ae3
22 changed files with 10492 additions and 1117 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/c3nav/site/static/site/css/c3nav.scss
View file

@ -111,7 +111,7 @@ input {
::-moz-placeholder {
color: $color-placeholder;
}
.material-icons {
.material-symbols {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@ -480,14 +480,14 @@ main:not(.show-details) #resultswrapper .details:not(#route-options),
main:not(.show-options) #resultswrapper #route-options {
display:none;
}
main .buttons .details .material-icons {
main .buttons .details .material-symbols {
transition: -webkit-transform 250ms;
-webkit-transition: -webkit-transform 250ms;
-o-transition: transform 250ms;
transition: transform 250ms;
transition: transform 250ms, -webkit-transform 250ms;
}
main.show-details .buttons .details .material-icons {
main.show-details .buttons .details .material-symbols {
-webkit-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
@ -729,7 +729,7 @@ main:not([data-view=route-result]) #route-dots {
height: 21px;
text-align: center;
}
.routeitem .icon .material-icons {
.routeitem .icon .material-symbols {
color: $color-icon;
font-size: 21px;
}
@ -776,7 +776,7 @@ main:not([data-view=route-result]) #route-dots {
padding-right: 0;
overflow: hidden;
}
.as-location .material-icons {
.as-location .material-symbols {
transform: rotate(-45deg);
}
}
@ -832,7 +832,7 @@ main:not([data-view=route-result]) #route-dots {
height: 3.3rem;
padding: 0;
}
button .material-icons, .button .material-icons {
button .material-symbols, .button .material-symbols {
font-size: 15px;
vertical-align: -3px;
}
@ -1348,7 +1348,7 @@ button + button {
.green {
color: #28b62c;
}
.material-icons {
.material-symbols {
text-transform: none !important;
}

32
src/c3nav/site/static/site/js/c3nav.js
View file

@ -102,12 +102,12 @@ c3nav = {
init: function () {
c3nav.access_query = new URLSearchParams(window.location.search).get("access");
c3nav.load_material_icons_if_needed();
c3nav.load_material_symbols_if_needed();
c3nav.load_searchable_locations();
$('#messages').find('ul.messages li').each(function() {
$(this).prepend(
$('<a href="#" class="close"><i class="material-icons">close</i></a>').click(function(e) {
$('<a href="#" class="close"><i class="material-symbols">close</i></a>').click(function(e) {
e.preventDefault();
$(this).parent().remove();
})
@ -636,7 +636,7 @@ c3nav = {
_build_route_item: function (icon, text) {
var elem = $('<div class="routeitem">');
if (icon.indexOf('.') === -1) {
elem.append($('<span class="icon"><i class="material-icons">' + icon + '</i></span>'));
elem.append($('<span class="icon"><i class="material-symbols">' + icon + '</i></span>'));
} else {
elem.append($('<span class="icon"><img src="/static/site/img/icons/' + icon + '"></span>'));
}
@ -964,7 +964,7 @@ c3nav = {
},
_build_location_html: function(location) {
var html = $('<div class="location">')
.append($('<i class="icon material-icons">').text(c3nav._map_material_icon(location.icon || 'place')))
.append($('<i class="icon material-symbols">').text(c3nav._map_material_icon(location.icon || 'place')))
.append($('<span>').text(location.title))
.append($('<small>').text(location.subtitle)).attr('data-id', location.id);
html.attr('data-location', JSON.stringify(location));
@ -1297,7 +1297,7 @@ c3nav = {
_set_modal_content: function(content, no_close) {
$('#modal').toggleClass('loading', !content)
.find('#modal-content')
.html((!no_close) ? '<button class="button-clear material-icons" id="close-modal">clear</button>' :'')
.html((!no_close) ? '<button class="button-clear material-symbols" id="close-modal">clear</button>' :'')
.append(content || '');
},
_modal_click: function(e) {
@ -1887,8 +1887,8 @@ c3nav = {
}
},
_material_icons_codepoints: null,
load_material_icons_if_needed: function() {
_material_symbols_codepoints: null,
load_material_symbols_if_needed: function() {
// load material icons codepoint for android 4.3.3 and other heccing old browsers
var elem = document.createElement('span'),
before = elem.style.fontFeatureSettings,
@ -1898,10 +1898,10 @@ c3nav = {
ligaturesSupported = (elem.style.fontFeatureSettings !== before);
}
if (!ligaturesSupported) {
$.get('/static/material-icons/codepoints', c3nav._material_icons_loaded);
$.get('/static/material-symbols/MaterialSymbolsOutlined.codepoints', c3nav._material_symbols_loaded);
}
},
_material_icons_loaded: function(data) {
_material_symbols_loaded: function(data) {
var lines = data.split("\n"),
line, result = {};
@ -1911,14 +1911,14 @@ c3nav = {
result[line[0]] = String.fromCharCode(parseInt(line[1], 16));
}
}
c3nav._material_icons_codepoints = result;
$('.material-icons').each(function() {
c3nav._material_symbols_codepoints = result;
$('.material-symbols').each(function() {
$(this).text(c3nav._map_material_icon($(this).text()));
});
},
_map_material_icon: function(name) {
if (c3nav._material_icons_codepoints === null) return name;
return c3nav._material_icons_codepoints[name] || '';
if (c3nav._material_symbols_codepoints === null) return name;
return c3nav._material_symbols_codepoints[name] || '';
},
_pause: function() {
if (c3nav._fetch_updates_timer !== null) {
@ -2084,7 +2084,7 @@ UserLocationControl = L.Control.extend({
onAdd: function () {
this._container = L.DomUtil.create('div', 'leaflet-control-user-location leaflet-bar ' + this.options.addClasses);
this._button = L.DomUtil.create('a', 'material-icons', this._container);
this._button = L.DomUtil.create('a', 'material-symbols', this._container);
this._button.innerHTML = c3nav._map_material_icon(c3nav.hasLocationPermission() ? 'location_searching' : 'location_disabled');
this._button.classList.toggle('control-disabled', !c3nav.hasLocationPermission());
this._button.href = '#';
@ -2102,7 +2102,7 @@ LabelControl = L.Control.extend({
onAdd: function () {
this._container = L.DomUtil.create('div', 'leaflet-control-labels leaflet-bar ' + this.options.addClasses);
this._button = L.DomUtil.create('a', 'material-icons', this._container);
this._button = L.DomUtil.create('a', 'material-symbols', this._container);
$(this._button).click(this.toggleLabels).dblclick(function(e) { e.stopPropagation(); });
this._button.innerText = c3nav._map_material_icon('label');
this._button.href = '#';
@ -2153,7 +2153,7 @@ SquareGridControl = L.Control.extend({
onAdd: function () {
this._container = L.DomUtil.create('div', 'leaflet-control-grid-layer leaflet-bar ' + this.options.addClasses);
this._button = L.DomUtil.create('a', 'material-icons', this._container);
this._button = L.DomUtil.create('a', 'material-symbols', this._container);
$(this._button).click(this.toggleGrid).dblclick(function(e) { e.stopPropagation(); });
this._button.innerText = c3nav._map_material_icon('grid_off');
this._button.href = '#';

2
src/c3nav/site/templates/site/base.html
View file

@ -24,7 +24,7 @@
<link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
<link href="{% static 'normalize/normalize.css' %}" rel="stylesheet">
<link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
<link href="{% static 'material-icons/material-icons.css' %}" rel="stylesheet">
<link href="{% static 'material-symbols/material-symbols.css' %}" rel="stylesheet">
<link href="{% static 'site/css/c3nav.scss' %}" rel="stylesheet" type="text/x-scss">
{% endcompress %}
</head>

2
src/c3nav/site/templates/site/fragment_location.html
View file

@ -1,5 +1,5 @@
<div class="location{% if form_value %} location-form-value{% endif %}">
<i class="icon material-icons">{% if location.get_icon %}{{ location.get_icon }}{% else %}place{% endif %}</i>
<i class="icon material-symbols">{% if location.get_icon %}{{ location.get_icon }}{% else %}place{% endif %}</i>
<span>{{ location.title }}</span>
<small>{% if add_subtitle %}{{ add_subtitle }}, {% endif %}{{ location.subtitle }}</small>
</div>

70
src/c3nav/site/templates/site/map.html
View file

@ -35,25 +35,25 @@
<section id="anywhere-popup-buttons">
<div class="buttons">
<button class="button-clear select-point">
<i class="material-icons">pin_drop</i>
<i class="material-symbols">pin_drop</i>
{% trans 'Show this point' %}
</button>
</div>
<div class="buttons">
<button class="button-clear show-nearby">
<i class="material-icons">search</i>
<i class="material-symbols">search</i>
{% trans 'Show nearby locations' %}
</button>
</div>
<div class="buttons position-buttons">
<a class="button button-clear set-position">
<i class="material-icons">my_location</i>
<i class="material-symbols">my_location</i>
{% trans 'Set my position' %}
</a>
</div>
<div class="buttons">
<a class="button button-clear report report-missing">
<i class="material-icons">feedback</i>
<i class="material-symbols">feedback</i>
{% trans 'Report missing location' %}
</a>
</div>
@ -61,25 +61,25 @@
<section id="location-popup-buttons">
<div class="buttons">
<button class="button-clear as-location">
<i class="material-icons">arrow_upward</i>
<i class="material-symbols">arrow_upward</i>
{% trans 'Select' %}
</button>
<button class="button-clear share">
<i class="material-icons">share</i>
<i class="material-symbols">share</i>
{% trans 'Share' %}
</button>
</div>
<div class="buttons">
<button class="button-clear as-origin"><i class="material-icons">directions</i> {% trans 'from here' %}</button>
<button class="button-clear as-destination"><i class="material-icons">directions</i> {% trans 'to here' %}</button>
<button class="button-clear as-origin"><i class="material-symbols">directions</i> {% trans 'from here' %}</button>
<button class="button-clear as-destination"><i class="material-symbols">directions</i> {% trans 'to here' %}</button>
</div>
<div class="buttons">
<a class="button button-clear report report-issue">
<i class="material-icons">feedback</i>
<i class="material-symbols">feedback</i>
{% trans 'Report issue' %}
</a>
<a class="button button-clear report report-missing">
<i class="material-icons">feedback</i>
<i class="material-symbols">feedback</i>
{% trans 'Report missing location' %}
</a>
</div>
@ -107,58 +107,58 @@
<section id="sidebar">
<section id="search" class="loading">
<div class="location locationinput empty" id="origin-input">
<i class="icon material-icons">place</i>
<i class="icon material-symbols">place</i>
<input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
<small></small>
<button class="button-clear locate material-icons">location_disabled</button>
<button class="button-clear clear material-icons">clear</button>
<button class="button-clear locate material-symbols">location_disabled</button>
<button class="button-clear clear material-symbols">clear</button>
</div>
<div class="location locationinput empty" id="destination-input">
<i class="icon material-icons">place</i>
<i class="icon material-symbols">place</i>
<input type="text" autocomplete="off" spellcheck="false" placeholder="{% trans 'Search any location…' %}">
<small></small>
<button class="button-clear random material-icons" href="/random/">casino</button>
<button class="button-clear locate material-icons">location_disabled</button>
<button class="button-clear clear material-icons">clear</button>
<button class="button-clear random material-symbols" href="/random/">casino</button>
<button class="button-clear locate material-symbols">location_disabled</button>
<button class="button-clear clear material-symbols">clear</button>
</div>
<i class="material-icons" id="route-dots">more_vert</i>
<i class="material-symbols" id="route-dots">more_vert</i>
<div class="buttons" id="location-buttons">
<button class="button-clear details">
<i class="material-icons">expand_more</i>
<i class="material-symbols">expand_more</i>
{% trans 'Details' %}
</button>
<button class="button-clear share">
<i class="material-icons">share</i>
<i class="material-symbols">share</i>
{% trans 'Share' %}
</button>
<button class="button-clear route">
<i class="material-icons">directions</i>
<i class="material-symbols">directions</i>
{% trans 'Route' %}
</button>
</div>
<div id="route-summary">
<i class="icon material-icons">directions</i>
<i class="icon material-symbols">directions</i>
<span></span>
<small><em></em></small>
<button class="button-clear options material-icons">settings</button>
<button class="button-clear options material-symbols">settings</button>
</div>
<div class="buttons" id="route-search-buttons">
<button class="button-clear swap">
<i class="material-icons">swap_vert</i>
<i class="material-symbols">swap_vert</i>
{% trans 'Swap' %}
</button>
<button class="button-clear close">
<i class="material-icons">close</i>
<i class="material-symbols">close</i>
{% trans 'Close' %}
</button>
</div>
<div class="buttons" id="route-result-buttons">
<button class="button-clear swap">
<i class="material-icons">swap_vert</i>
<i class="material-symbols">swap_vert</i>
{% trans 'Swap' %}
</button>
<button class="button-clear details">
<i class="material-icons">arrow_downward</i>
<i class="material-symbols">arrow_downward</i>
{% trans 'Details' %}
</button>
</div>
@ -167,41 +167,41 @@
<section id="autocomplete"></section>
<section id="location-details" class="details">
<div class="details-head">
<button class="button close button-clear material-icons float-right">close</button>
<button class="button close button-clear material-symbols float-right">close</button>
<h2>{% trans 'Details' %}</h2>
</div>
<div class="details-body"></div>
<div class="details-buttons buttons">
<a class="button button-clear report report-issue">
<i class="material-icons">feedback</i>
<i class="material-symbols">feedback</i>
{% trans 'Report issue' %}
</a>
<a class="button button-clear report report-missing">
<i class="material-icons">feedback</i>
<i class="material-symbols">feedback</i>
{% trans 'Report missing location' %}
</a>
<a class="button button-clear editor" target="_blank">
<i class="material-icons">edit</i>
<i class="material-symbols">edit</i>
{% trans 'Open in Editor' %}
</a>
</div>
</section>
<section id="route-details" class="details">
<div class="details-head">
<button class="button close button-clear material-icons float-right">close</button>
<button class="button close button-clear material-symbols float-right">close</button>
<h2>{% trans 'Details' %}</h2>
</div>
<div class="details-body"></div>
<div class="details-buttons buttons">
<a class="button button-clear report report-issue">
<i class="material-icons">feedback</i>
<i class="material-symbols">feedback</i>
{% trans 'Report issue' %}
</a>
</div>
</section>
<section id="route-options" class="details">
<div class="details-head">
<button class="button close button-clear material-icons float-right">close</button>
<button class="button close button-clear material-symbols float-right">close</button>
<h2>{% trans 'Route options' %}</h2>
</div>
<div class="details-body">
@ -216,7 +216,7 @@
</section>
<div class="app-ads">
<div id="android-app-ad">
<a href="#" class="close"><i class="material-icons">close</i></a>
<a href="#" class="close"><i class="material-symbols">close</i></a>
{% blocktrans with play_url="https://play.google.com/store/apps/details?id=de.c3nav.droid" apk_url="https://github.com/c3nav/c3nav-android/releases" %}Get the c3nav Android app on <a href="{{ play_url }}" target="_blank">Google Play</a> or <a href="{{ apk_url }}" target="_blank">download the APK!</a>{% endblocktrans %}
</div>
</div>

BIN
src/c3nav/static/material-icons/MaterialIcons-Regular.eot
View file

Binary file not shown.

BIN
src/c3nav/static/material-icons/MaterialIcons-Regular.ttf
View file

Binary file not shown.

BIN
src/c3nav/static/material-icons/MaterialIcons-Regular.woff
View file

Binary file not shown.

BIN
src/c3nav/static/material-icons/MaterialIcons-Regular.woff2
View file

Binary file not shown.

1029
src/c3nav/static/material-icons/codepoints
View file

File diff suppressed because it is too large Load diff

28
src/c3nav/static/material-icons/material-icons.css vendored
View file

@ -1,28 +0,0 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

0
src/c3nav/static/material-icons/LICENSE → src/c3nav/static/material-symbols/LICENSE
View file

3466
src/c3nav/static/material-symbols/MaterialSymbolsOutlined.codepoints Normal file
View file

File diff suppressed because it is too large Load diff

BIN
src/c3nav/static/material-symbols/MaterialSymbolsOutlined.ttf Normal file
View file

Binary file not shown.

BIN
src/c3nav/static/material-symbols/MaterialSymbolsOutlined.woff2 Normal file
View file

Binary file not shown.

3463
src/c3nav/static/material-symbols/MaterialSymbolsRounded.codepoints Normal file
View file

File diff suppressed because it is too large Load diff

BIN
src/c3nav/static/material-symbols/MaterialSymbolsRounded.ttf Normal file
View file

Binary file not shown.

BIN
src/c3nav/static/material-symbols/MaterialSymbolsRounded.woff2 Normal file
View file

Binary file not shown.

3466
src/c3nav/static/material-symbols/MaterialSymbolsSharp.codepoints Normal file
View file

File diff suppressed because it is too large Load diff

BIN
src/c3nav/static/material-symbols/MaterialSymbolsSharp.ttf Normal file
View file

Binary file not shown.

BIN
src/c3nav/static/material-symbols/MaterialSymbolsSharp.woff2 Normal file
View file

Binary file not shown.

37
src/c3nav/static/material-symbols/material-symbols.css Normal file
View file

@ -0,0 +1,37 @@
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url('MaterialSymbolsOutlined.woff2') format('woff2'),
url('MaterialSymbolsOutlined.ttf') format('truetype');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}