Skip to content

Commit

Permalink
Fixed FontAwesome v6.5 issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@axelstudios
axelstudios committed Dec 14, 2023
1 parent 3d334cf commit 5554d57
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 86 deletions.
24 changes: 6 additions & 18 deletions seed/static/seed/partials/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,36 +14,24 @@ <h1 translate>The SEED Platform™</h1>
<div class="row">
<div class="content_col col-md-4">
<div class="content_col_header">
<div class="content_col_header_left">
<span><i class="fa-solid fa-cloud-arrow-up"></i></span>
</div>
<div class="content_col_header_right">
<h3 translate>Upload your data</h3>
</div>
<i class="fa-solid fa-cloud-arrow-up"></i>
<h3 translate>Upload your data</h3>
</div>
<div class="copy" translate>MARKETING_BULLET_1</div>
</div>

<div class="content_col col-md-4">
<div class="content_col_header">
<div class="content_col_header_left">
<span><i class="fa-solid fa-arrow-right-arrow-left"></i></span>
</div>
<div class="content_col_header_right">
<h3 translate>Match your data</h3>
</div>
<i class="fa-solid fa-arrow-right-arrow-left"></i>
<h3 translate>Match your data</h3>
</div>
<div class="copy" translate>MARKETING_BULLET_2</div>
</div>

<div class="content_col col-md-4">
<div class="content_col_header">
<div class="content_col_header_left">
<span><i class="fa-solid fa-square-check"></i></span>
</div>
<div class="content_col_header_right">
<h3 translate>Manage compliance</h3>
</div>
<i class="fa-solid fa-square-check"></i>
<h3 translate>Manage compliance</h3>
</div>
<div class="copy" translate>MARKETING_BULLET_3</div>
</div>
Expand Down
80 changes: 29 additions & 51 deletions seed/static/seed/scss/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ a:not([href]) {
}

.sidebar {
font-size: 14px;
margin-left: 0;
position: fixed;
float: none;
Expand All @@ -220,15 +221,15 @@ a:not([href]) {
}

.item {
position: relative;
overflow: hidden;
display: block;
padding: 16px;
width: 100%;
height: 53px;
height: 54px;
color: $white;
cursor: pointer;
display: flex;
text-decoration: none;
justify-content: start;
overflow: hidden;
align-items: center;
position: relative;

&:hover,
&.active {
Expand Down Expand Up @@ -258,35 +259,22 @@ a:not([href]) {

.icon {
display: flex;
align-items: center;
position: relative;
float: left;
width: 20px;
text-align: center;

i {
width: 100%;
}
justify-content: center;
min-width: 55px;

.toggle {
display: flex;
padding-left: 2px;
}
}

i:not(.fa-sm) {
font-size: 18px;
}

.item_name {
position: relative;
top: 1px;
margin-top: 0;
margin-left: 16px;
line-height: 0;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
overflow: hidden;
text-overflow: ellipsis;
max-width: 204px;
}

.badge {
Expand Down Expand Up @@ -859,8 +847,6 @@ a:not([href]) {
h3 {
font-size: 14px;
font-weight: bold;
margin-top: 26px;
margin-bottom: 6px;
}

.content_block {
Expand Down Expand Up @@ -909,42 +895,34 @@ a:not([href]) {

.content_col {
.content_col_header {
position: relative;
overflow: auto;

.content_col_header_left {
position: relative;
float: left;
display: flex;
flex-direction: row;

i {
padding-top: 7px;
padding-right: 10px;
font-size: 48px;
i {
padding-top: 7px;
padding-right: 10px;
font-size: 48px;

&.fa-cloud-arrow-up {
color: $lightBlue;
}
&.fa-cloud-arrow-up {
color: $lightBlue;
}

&.fa-arrow-right-arrow-left {
color: lighten($purple, 25%);
}
&.fa-arrow-right-arrow-left {
color: lighten($purple, 25%);
}

&.fa-square-check {
color: lighten($green, 20%);
}
&.fa-square-check {
color: lighten($green, 20%);
}
}

.content_col_header_right {
h3 {
font-size: 20px;
font-weight: bold;
}
h3 {
font-size: 20px;
font-weight: bold;
}
}

.copy {
clear: both;
padding: 5px 30px 0 0;
font-size: 16px;
}
Expand Down
24 changes: 12 additions & 12 deletions seed/templates/seed/_sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,62 +3,62 @@
<div class="menu">
<a id="sidebar-menu" class="item" ng-click="toggle_menu()">
<div class="icon">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-lg fa-bars"></i>
<span ng-switch="expanded_controller" class="toggle">
<i ng-switch-when="true" id="sidebar-menu-close" class="fa-solid fa-chevron-left fa-sm"></i>
<i ng-switch-when="false" id="sidebar-menu-open" class="fa-solid fa-chevron-right fa-sm"></i>
</span>
</div>
</a>
<a id="sidebar-profile" class="item" ng-class="{active: is_active('/profile'), 'disabled-item': !logged_in}" href="{% url "seed:home" %}#/profile">
<div class="icon"><i class="fa-solid fa-gear"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-gear"></i></div>
<div class="item_name">{$ username $}</div>
</a>
<div class="divider"></div>
<a id="sidebar-inventory" ng-class="{item: true, active: is_active('/properties') || is_active('/taxlots'), 'disabled-item': !logged_in}" href="{% url "seed:home" %}#/properties">
<div class="icon"><i class="fa-solid fa-building"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-building"></i></div>
<div class="item_name" translate>Inventory</div>
</a>
<a id="sidebar-data" ng-class="{item: true, active: is_active('/data'), 'disabled-item': !logged_in}" title="{$:: 'Data' | translate $}" href="{% url "seed:home" %}#/data" ng-show="menu.user.organization.user_role !== 'viewer'">
<div class="icon"><i class="fa-solid fa-sitemap"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-sitemap"></i></div>
<div class="item_name" translate>Data</div>
<div ng-show="logged_in" class="badge badge_menu">{$ datasets_count | number:0 $}</div>
</a>
<a id="sidebar-accounts" ng-class="{item: true, active: is_active('/accounts'), 'disabled-item': !logged_in}" title="{$:: 'Organizations' | translate $}" href="{% url "seed:home" %}#/accounts">
<div class="icon"><i class="fa-solid fa-users"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-users"></i></div>
<div class="item_name" translate>Organizations</div>
<div ng-show="logged_in" class="badge badge_menu">{$ organizations_count | number:0 $}</div>
</a>
<a id="sidebar-accounts" ng-class="{item: true, active: is_active('/insights'), 'disabled-item': !logged_in}" title="{$:: 'Insights' | translate $}" href="{% url "seed:home" %}#/insights">
<div class="icon"><i class="fa-solid fa-gauge-high"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-gauge-high"></i></div>
<div class="item_name" translate>Insights</div>
</a>

<a id="sidebar-accounts" ng-class="{item: true, active: is_active('/analyses'), 'disabled-item': !logged_in}" title="{$:: 'Analyses' | translate $}" href="{% url "seed:home" %}#/analyses">
<div class="icon"><i class="fa-solid fa-bar-chart"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-bar-chart"></i></div>
<div class="item_name" translate>Analyses</div>
</a>

<div class="divider"></div>

<a id="sidebar-api" ng-class="{item: true, active: is_active('/api/swagger'), 'disabled-item': !logged_in}" title="{$:: 'API Documentation' | translate $}" href="{% url "seed:home" %}#/api/swagger">
<div class="icon"><i class="fa-solid fa-code"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-code"></i></div>
<div class="item_name" translate>API Documentation</div>
</a>
<a id="sidebar-contact" ng-class="{item: true, active: is_active('/contact'), 'disabled-item': !logged_in}" title="{$:: 'Contact' | translate $}" href="{% url "seed:home" %}#/contact">
<div class="icon"><i class="fa-solid fa-question-circle"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-question-circle"></i></div>
<div class="item_name" translate>Contact</div>
</a>
<a id="sidebar-about" ng-class="{item: true, active: is_active('/about'), 'disabled-item': !logged_in}" title="{$:: 'About' | translate $}" href="{% url "seed:home" %}#/about">
<div class="icon"><i class="fa-solid fa-info-circle"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-info-circle"></i></div>
<div class="item_name" translate>About</div>
</a>
<a id="sidebar-docs" ng-class="{item: true, active: is_active('/documentation/', true)}" title="{$:: 'Documentation' | translate $}" href="{% url "docs:documentation" %}#/">
<div class="icon"><i class="fa-solid fa-book"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-book"></i></div>
<div class="item_name" translate>Documentation</div>
</a>
<a id="sidebar-logout" class="item" ng-class="{'disabled-item': !logged_in}" title="{$:: 'Logout' | translate $}" href="{% url "landing:logout" %}">
<div class="icon"><i class="fa-solid fa-sign-out"></i></div>
<div class="icon"><i class="fa-solid fa-lg fa-sign-out"></i></div>
<div class="item_name" translate>Logout</div>
</a>
</div>
Expand Down
8 changes: 4 additions & 4 deletions vendors/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion vendors/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"dependencies": {
"@fontsource/pt-sans": "^5.0.8",
"@fontsource/pt-sans-narrow": "^5.0.15",
"@fortawesome/fontawesome-free": "^6.4.2",
"@fortawesome/fontawesome-free": "^6.5.1",
"angular": "^1.8.3",
"angular-animate": "^1.8.3",
"angular-aria": "^1.8.3",
Expand Down

0 comments on commit 5554d57

Please sign in to comment.