Footer UI update (#11337)
* tooltips 1.0.1 * tooltips 1.0.1 * footer redesign * missed spots * color * revert class renaming * spacing fix * spacing fix * Update app/views/layouts/_footer.html.erb Co-authored-by: Michael Kohl <me@citizen428.net> Co-authored-by: Michael Kohl <me@citizen428.net>
This commit is contained in:
ludwiczakpawel
GitHub
parent
0ee74d1e26
commit
2225fe9999
5 changed files with 56 additions and 100 deletions
1
app/assets/images/logo-forem.svg
Normal file
1
app/assets/images/logo-forem.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)" fill="#1AB3A6"><path d="M4.603 1.438a8.056 8.056 0 017.643 5.478 8.543 8.543 0 00-3.023 5.968H8.054C3.606 12.884 0 9.296 0 4.87V1.468a.03.03 0 01.03-.03h4.573zM23.97 6.515a.03.03 0 01.03.03v2.833c0 4.11-3.354 7.442-7.491 7.442h-2.881v5.726h-2.305V14.53l.022-1.145c.294-3.843 3.526-6.87 7.469-6.87h5.155z"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 521 B |
|
|
@ -20,12 +20,16 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
&.user-tags-followed-0, &.user-tags-followed-1, &.user-tags-followed-2{
|
||||
&.user-tags-followed-0,
|
||||
&.user-tags-followed-1,
|
||||
&.user-tags-followed-2 {
|
||||
#sidebar-nav-followed-tags {
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
&.user-tags-followed-3, &.user-tags-followed-4, &.user-tags-followed-5{
|
||||
&.user-tags-followed-3,
|
||||
&.user-tags-followed-4,
|
||||
&.user-tags-followed-5 {
|
||||
#sidebar-nav-followed-tags {
|
||||
height: 205px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@
|
|||
|
||||
// Footer
|
||||
--footer-bg: var(--base-20);
|
||||
--footer-color: var(--base-80);
|
||||
--footer-color: var(--base-60);
|
||||
--footer-link-color: var(--base-80);
|
||||
--footer-link-color-hover: var(--base-100);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,85 +1,40 @@
|
|||
@import '../config/import';
|
||||
|
||||
.crayons-footer {
|
||||
--footer-padding: var(--su-4);
|
||||
--footer-padding: var(--su-5);
|
||||
background: var(--footer-bg);
|
||||
color: var(--footer-color);
|
||||
padding: var(--footer-padding) 0;
|
||||
padding: var(--footer-padding);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
--footer-padding: var(--su-6);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-l) {
|
||||
--footer-padding: var(--su-8);
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
padding: 0 var(--su-2);
|
||||
margin-bottom: calc(var(--su-9) + env(safe-area-inset-bottom));
|
||||
|
||||
@media (min-width: $breakpoint-m) {
|
||||
flex-direction: row;
|
||||
padding: 0 var(--layout-padding);
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: grid;
|
||||
column-gap: var(--su-4);
|
||||
grid-template-rows: repeat(9, 1fr);
|
||||
grid-auto-flow: column;
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
column-gap: var(--su-8);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-l) {
|
||||
grid-template-rows: repeat(6, 1fr);
|
||||
column-gap: var(--su-10);
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: grid;
|
||||
gap: var(--su-4);
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
justify-items: center;
|
||||
font-size: var(--fs-s);
|
||||
order: 1;
|
||||
padding: var(--su-6) 0 0 var(--su-3);
|
||||
|
||||
grid-gap: var(--su-6);
|
||||
margin-bottom: env(safe-area-inset-bottom);
|
||||
@media (min-width: $breakpoint-m) {
|
||||
width: 25%;
|
||||
padding: 0;
|
||||
margin-right: var(--su-8);
|
||||
order: initial;
|
||||
grid-gap: var(--su-5);
|
||||
font-size: var(--fs-base);
|
||||
}
|
||||
}
|
||||
|
||||
// Logo
|
||||
&__logo {
|
||||
display: flex;
|
||||
|
||||
.logo {
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
padding: 0 7px 0 9px; // TODO: we have to fix SVG for logo a little...
|
||||
background: var(--logo-bg);
|
||||
fill: var(--logo-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
&__divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--footer-color);
|
||||
opacity: 0.15;
|
||||
width: 20%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__mascot {
|
||||
position: absolute;
|
||||
right: var(--su-4);
|
||||
top: calc(var(--footer-padding) * -1 - 2px);
|
||||
right: var(--footer-padding);
|
||||
top: -2px;
|
||||
display: none;
|
||||
transform-origin: center top;
|
||||
transition: all var(--transition-props);
|
||||
|
|
|
|||
|
|
@ -1,41 +1,37 @@
|
|||
<footer class="crayons-footer print-hidden">
|
||||
<div id="footer-container" class="crayons-layout crayons-footer__container">
|
||||
<div class="crayons-footer__info">
|
||||
<div><%= render "layouts/logo" %></div>
|
||||
<p><%= SiteConfig.community_description %></p>
|
||||
<div><%= render partial: "layouts/social_media" %></div>
|
||||
<%# The following copy is necessary for compatability with the Forem AGPL licence which requires instances to link back to the source. %>
|
||||
<p class="fs-xs color-base-60"><%= community_qualified_name %> copyright <%= copyright_notice %></p>
|
||||
<p class="fs-xs color-base-60">Built on <a href="https://www.forem.com">Forem</a> — the <a href="https://dev.to/t/opensource">open source</a> software that powers <a href="https://dev.to">DEV</a> and other inclusive communities.</p>
|
||||
<p class="fs-xs color-base-60">Made with love and <a href="https://dev.to/t/rails">Ruby on Rails</a>.</p>
|
||||
</div>
|
||||
<div id="footer-container" class="crayons-layout crayons-layout--limited-m crayons-footer__container">
|
||||
<nav class="m:-mt-4">
|
||||
<a href="/" class="crayons-link inline-block p-2">Home</a>
|
||||
<% NavigationLink.ordered.each do |link| %>
|
||||
<% if !link.display_only_when_signed_in? || (link.display_only_when_signed_in? && user_signed_in?) %>
|
||||
<a href="<%= link.url %>" class="crayons-link inline-block p-2"><%= link.name %></a>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<nav class="crayons-footer__nav">
|
||||
<a href="/" class="crayons-link crayons-link--block">Home</a>
|
||||
<% NavigationLink.ordered.each do |link| %>
|
||||
<% if !link.display_only_when_signed_in || (link.display_only_when_signed_in && user_signed_in?) %>
|
||||
<a href="<%= link.url %>" class="crayons-link crayons-link--block">
|
||||
<%= link.name %>
|
||||
</a>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% unless user_signed_in? %>
|
||||
<a href="<%= sign_up_path %>" class="crayons-link crayons-link--block fw-bold">
|
||||
Sign In/Up
|
||||
</a>
|
||||
<% else %>
|
||||
<a href="/new" class="crayons-link crayons-link--block fw-bold">Write a post</a>
|
||||
<% end %>
|
||||
<% unless user_signed_in? %>
|
||||
<a href="<%= sign_up_path %>" class="crayons-link fw-bold inline-block p-2">Sign In/Up</a>
|
||||
<% else %>
|
||||
<a href="/new" class="crayons-link fw-bold inline-block p-2">Write a post</a>
|
||||
<% end %>
|
||||
|
||||
<div class="pt-4"><%= render partial: "layouts/social_media" %></div>
|
||||
</nav>
|
||||
|
||||
<% if SiteConfig.mascot_footer_image_url.present? %>
|
||||
<%= image_tag(Images::Optimizer.call(SiteConfig.mascot_footer_image_url, width: 100),
|
||||
class: "crayons-footer__mascot",
|
||||
alt: SiteConfig.mascot_image_description,
|
||||
width: SiteConfig.mascot_footer_image_width,
|
||||
height: SiteConfig.mascot_footer_image_height,
|
||||
loading: "lazy") %>
|
||||
<% end %>
|
||||
<hr class="crayons-footer__divider">
|
||||
<p class="fs-s"><a href="/" aria-label="<%= community_name %> Home" class="crayons-link"><%= community_qualified_name %></a> – <%= SiteConfig.community_description %></p>
|
||||
<div class="m:-mb-4">
|
||||
<%# The following copy is necessary for compatability with the Forem AGPL licence which requires instances to link back to the source. %>
|
||||
<p class="fs-s">Built on <a href="https://www.forem.com" class="crayons-link" target="_blank">Forem</a> — the <a href="https://dev.to/t/opensource" class="crayons-link">open source</a> software that powers <a href="https://dev.to" class="crayons-link">DEV</a> and other inclusive communities.</p>
|
||||
<p class="fs-s">Made with love and <a href="https://dev.to/t/rails" class="crayons-link">Ruby on Rails</a>. <%= community_qualified_name %> <span title="copyright">©</span> <%= copyright_notice %>.</p>
|
||||
<div><a href="https://www.forem.com" target="_blank" class="inline-block mt-4"><%= inline_svg_tag("logo-forem.svg", aria: true, class: "crayons-icon crayons-icon--default", title: "Forem logo") %></a></div>
|
||||
</div>
|
||||
</div>
|
||||
<% if SiteConfig.mascot_footer_image_url.present? %>
|
||||
<%= image_tag(Images::Optimizer.call(SiteConfig.mascot_footer_image_url, width: 100),
|
||||
class: "crayons-footer__mascot",
|
||||
alt: SiteConfig.mascot_image_description,
|
||||
width: SiteConfig.mascot_footer_image_width,
|
||||
height: SiteConfig.mascot_footer_image_height,
|
||||
loading: "lazy") %>
|
||||
<% end %>
|
||||
</footer>
|
||||
<div id="snack-zone"></div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue