Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove material icons #264

Merged
merged 4 commits into from
Feb 25, 2020
Merged

Remove material icons #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
59e293d
Add macro for svg font and update the header component macros with sv…
vidya-ram Feb 25, 2020
f193b1c
Remove material icon from baseframe
vidya-ram Feb 25, 2020
eb62d34
Add font awesome styles
vidya-ram Feb 25, 2020
829dced
Fix profile url in navbar
vidya-ram Feb 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 40 additions & 5 deletions baseframe/static/css/mui.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3596,6 +3596,42 @@ h6 {
margin-left: 8px;
}

.fa5-icon {
width: 14px;
height: 14px;
fill: currentColor;
}

.fa5--align-baseline {
position: relative;
top: 0.09em;
}

.fa5-icon--caption {
width: 12px;
height: 12px;
}

.fa5-icon--subhead {
width: 16px;
height: 16px;
}

.fa5-icon--title {
width: 18px;
height: 18px;
}

.fa5-icon--headline {
width: 24px;
height: 24px;
}

.fa5-icon--display1 {
width: 32px;
height: 32px;
}

.header {
background: #fff;
}
Expand Down Expand Up @@ -3623,7 +3659,7 @@ h6 {
display: inline-block;
text-decoration: none;
cursor: pointer;
margin-right: 8px;
margin-right: 15px;
height: 24px;
}

Expand Down Expand Up @@ -4047,6 +4083,9 @@ li p + ol {
.mui-form .has-error label {
color: #c04b61;
}
.mui-form .alert {
margin-bottom: 15px;
}

.mui-form--margins {
margin-top: 15px;
Expand Down Expand Up @@ -4302,10 +4341,6 @@ li p + ol {
text-decoration: none;
}

.control-icon .material-icons {
font-size: 34px;
}

.modal {
display: none;
padding: 15px;
Expand Down
4 changes: 4 additions & 0 deletions baseframe/static/sass/baseframe-material/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,10 @@
.has-error label {
color: $mui-text-danger;
}

.alert {
margin-bottom: 15px;
}
}

.mui-form--margins {
Expand Down
40 changes: 40 additions & 0 deletions baseframe/static/sass/baseframe-material/_helper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,43 @@ h6 {
.mui-btn--nostyle + .mui-btn--nostyle {
margin-left: 8px;
}

// ============================================================================
// Font awesome 5
// ============================================================================

.fa5-icon {
width: 14px;
height: 14px;
fill: currentColor;
}

.fa5--align-baseline {
position: relative;
top: 0.09em;
}

.fa5-icon--caption {
width: 12px;
height: 12px;
}

.fa5-icon--subhead {
width: 16px;
height: 16px;
}

.fa5-icon--title {
width: 18px;
height: 18px;
}

.fa5-icon--headline {
width: 24px;
height: 24px;
}

.fa5-icon--display1 {
width: 32px;
height: 32px;
}
2 changes: 1 addition & 1 deletion baseframe/static/sass/baseframe-material/_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
display: inline-block;
text-decoration: none;
cursor: pointer;
margin-right: 8px;
margin-right: 15px;
height: 24px;
}

Expand Down
48 changes: 24 additions & 24 deletions baseframe/static/sass/baseframe-material/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
.modal {
display: none;
padding: $reflex-cell-spacing;
@extend .mui--z1;
display: none;
padding: $reflex-cell-spacing;
@extend .mui--z1;

//Use material design icon for close
a.close-modal {
display: none;
}
//Use fa5 icon for close
a.close-modal {
display: none;
}

.modal__close {
position: absolute;
top: $reflex-cell-spacing/2;
right: $reflex-cell-spacing/2;
display: block;
}
.modal__header {
@extend .mui--text-title;
}
.modal__body {
@extend .mui--text-body2;
}
.modal__close {
position: absolute;
top: $reflex-cell-spacing/2;
right: $reflex-cell-spacing/2;
display: block;
}
.modal__header {
@extend .mui--text-title;
}
.modal__body {
@extend .mui--text-body2;
}
}

.jquery-modal.blocker.current {
z-index: 1001;
> .modal {
display: inline-block;
overflow: hidden;
}
z-index: 1001;
> .modal {
display: inline-block;
overflow: hidden;
}
}
4 changes: 0 additions & 4 deletions baseframe/static/sass/baseframe-material/_thumbnail.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,3 @@
outline: none;
text-decoration: none;
}

.control-icon .material-icons {
font-size: 34px;
}
2 changes: 1 addition & 1 deletion baseframe/templates/baseframe/bootstrap3/components.html.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@
<li {% if links %} class="separator-authlinks" {%- endif %}>
{%- with orgs = current_auth.user.organization_links() %}
{% if orgs %}
<a href="/profile">My profile</a></li>
<a href="{{ current_auth.user.profile_url }}">My profile</a></li>
{%- for org in orgs %}
<li><a href="{{ org.link }}">{{ org.title }}</a></li>
{%- endfor %}
Expand Down
2 changes: 0 additions & 2 deletions baseframe/templates/baseframe/mui/baseframe.html.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,6 @@

<!-- Included CSS Files -->
{%- block font_icons %}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
{%- endblock %}
{%- for asset in config.get('ext_css', []) %}
<link rel="stylesheet" type="text/css" href="{{ asset|ext_asset_url }}" />
Expand Down
32 changes: 21 additions & 11 deletions baseframe/templates/baseframe/mui/components.html.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
{%- macro faicon(icon, css_class='') -%}
{% assets "fa5-sprite" %}<svg class="fa5-icon {%- if css_class %} {{ css_class }} {%- endif -%}" aria-hidden="true" role="img"><use xlink:href="{{ ASSET_URL }}#{{icon}}"></use></svg>{% endassets %}
{%- endmacro %}

{%- macro alertbox(category, message="") %}
<div class="alert alert--{{category}} alert--dismissable">
<a class="alert__close" href="javascript:void(0);" aria-label="{% trans %}Close{% endtrans %}">
{{ faicon('times', 'fa5-icon--subhead fa5--align-baseline') }}
</a>
<p class="alert__text">{{ message }}</p>
</div>
{%- endmacro %}

{%- macro flash_messages() -%}
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert--{{category}} alert--dismissable">
<a class="alert__close" href="javascript:void(0);" aria-label="{% trans %}Close{% endtrans %}"><i class="material-icons">clear</i></a>
<p class="alert__text">{{ message }}</p>
</div>
{{ alertbox(category, message) }}
{% endfor %}
{% endif %}
{% endwith %}
Expand All @@ -19,15 +29,15 @@
<nav id="hgnav" class="header__nav" role="navigation">
<div class="header__site-title {% if current_auth.is_anonymous -%}header__site-title--smaller{% endif %}">
{% if side_menu_button %}
<a class="header__app-icon header__app-icon--menu" id="js-sidebar-menu-button" aria-label="{% trans %}Toggle menu{% endtrans %}" aria-expanded="false"><i class="material-icons" aria-hidden="true">menu</i></a>
<a class="header__app-icon header__app-icon--menu" id="js-sidebar-menu-button" aria-label="{% trans %}Toggle menu{% endtrans %}" aria-expanded="false">{{ faicon('bars', 'fa5-icon--title') }}</a>
{% endif %}
<div class="header__site-title__title">{{site_title}}</div>
</div>
<div class="header__right-nav {% if current_auth.is_anonymous -%}header__right-nav--larger{% endif %}">
<ul class="header__nav-list">
{%- for link in site_links %}
<li class="header__nav-list__item">
<a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links {% if link.class %}{{ link.class }}{% endif %} {% if current_view.current_section == link.name %}header__nav-links-active{% endif %}" aria-label="{{ link.title }}">{% if link.icon %}<i class="material-icons mui--align-middle header__nav-links__icon" aria-hidden="true">{{link.icon}}</i>{% endif %}<span class="header__nav-links__text">{{ link.title }}</span>
<a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links {% if link.class %}{{ link.class }}{% endif %} {% if current_view.current_section == link.name %}header__nav-links-active{% endif %}" aria-label="{{ link.title }}">{% if link.icon %}{{ faicon(link.icon, link.icon_class) }}{% endif %} <span class="header__nav-links__text">{{ link.title }}</span>
</a>
</li>
{%- endfor %}
Expand Down Expand Up @@ -61,14 +71,14 @@
{%- for link in user_links %}
<li class="header__side-nav-list__item">
<a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links header__nav-links--sidebar {%- if link.class %}{{ link.class }} {% endif %}" aria-label="{{ link.title }}">
{% if link.icon %}<i class="material-icons header__side-nav-list__item__icon" aria-hidden="true">{{link.icon}}</i>{% endif %} {{ link.title }}
{% if link.icon %}{{ faicon(link.icon, link.icon_class) }}{% endif %} {{ link.title }}
</a>
</li>
{%- endfor %}
{%- for link in site_links %}
<li class="header__side-nav-list__item">
<a href="{{ link.url }}" {%- if link.rel %} rel="{{ link.rel }}"{% endif %} class="header__nav-links header__nav-links--sidebar {%- if link.class %}{{ link.class }} {% endif %}" aria-label="{{ link.title }}">
{% if link.icon %}<i class="material-icons header__side-nav-list__item__icon" aria-hidden="true">{{link.icon}}</i>{% endif %} {{ link.title }}
{% if link.icon %}{{ faicon(link.icon, link.icon_class) }}{% endif %} {{ link.title }}
</a>
</li>
{%- endfor %}
Expand All @@ -78,7 +88,7 @@
{%- macro add_hasgeek_auth(links, loginbtntext) %}
{% if not current_auth.is_anonymous -%}
<a class="header__app-icon" data-mui-toggle="dropdown" id="hg-user-btn" role="button" aria-expanded="false" aria-label="{% trans %}My account{% endtrans %}">
<i class="material-icons" aria-hidden="true">account_circle</i>
{{ faicon('user', 'fa5-icon--title') }}
</a>
<ul class="mui-dropdown__menu mui-dropdown__menu--right">
{%- for link in links %}
Expand All @@ -87,7 +97,7 @@
<li {% if links %} class="separator-authlinks" {%- endif %}>
{%- with orgs = current_auth.user.organization_links() %}
{% if orgs %}
<a href="/profile" aria-label="{% trans %}My profile{% endtrans %}">{% trans %}My profile{% endtrans %}</a></li>
<a href="{{ current_auth.user.profile_url }}" aria-label="{% trans %}My profile{% endtrans %}">{% trans %}My profile{% endtrans %}</a></li>
{%- for org in orgs %}
<li><a href="{{ org.link }}" aria-label="{{ org.title }}">{{ org.title }}</a></li>
{%- endfor %}
Expand All @@ -111,7 +121,7 @@
{'title': 'HGTV', 'url': 'https://hasgeek.tv/', 'icon': 'https://static.hasgeek.co.in/static/img/hgnav/hg_hgtv.png'},
]%}
<a class="header__app-icon" data-mui-toggle="dropdown" role="button" aria-expanded="false" aria-label="{% trans %}Apps{% endtrans %}">
<i class="material-icons" aria-hidden="true">apps</i>
{{ faicon('th', 'fa5-icon--title') }}
</a>
<ul class="mui-dropdown__menu mui-dropdown__menu--right" role="menu">
{%- for link in network_links %}
Expand Down
9 changes: 4 additions & 5 deletions baseframe/templates/baseframe/mui/forms.html.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{%- from "baseframe/mui/components.html.jinja2" import alertbox -%}

{% macro rendererrors(field) -%}
{%- if field.errors -%}
{%- for error in field.errors %}
Expand Down Expand Up @@ -130,10 +132,7 @@

{% macro renderform_inner(form, formid, style='horiz', autosave=False, draft_revision=None) -%}
{%- if form.errors %}
<div class="alert alert--error alert--dismissable">
<a class="alert__close" href="javascript:void(0);" aria-label="close"><i class="material-icons">clear</i></a>
<p class="alert__text"><i class="material-icons alert__icon">error</i> {% trans %}Please review the indicated issues{% endtrans %}</p>
</div>
{{ alertbox('error', 'Please review the indicated issues') }}
{%- endif %}
{% if message %}<p>{{ message }}</p>{% endif %}
<div style="display:none;"><input type="hidden" name="form.id" value="{{ formid }}" /></div>
Expand Down Expand Up @@ -177,7 +176,7 @@
form.find('input[type="submit"]').prop('disabled', false).removeClass('submit-disabled');
form.find('button[type="submit"]').prop('disabled', false).removeClass('submit-disabled');
form.find('.loading').addClass('mui--hide');
form.append('<div class="alert alert--error"><a class="alert__close" href="javascript:void(0);" aria-label="close"><i class="material-icons">clear</i></a><p class="alert__text"><i class="material-icons alert__icon">error</i> An error occured when submitting the form</p></div>');
form.append({{ alertbox('error', 'An error occured when submitting the form') | tojson }});
} // No comma or semicolon here
});
});
Expand Down