maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Design fixes for badges (#18445)

Browse source 
* Design fixes for badges

* Badges UI fixes

* Shifted styles to scss file

* Removed gray functionality for badge
This commit is contained in:
Rajat Talesra 2022-09-23 23:32:28 +05:30 • committed by GitHub
parent 17aaa7afa8
commit 7b0f8b6011
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 33 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/badge_details.scss Normal file
View file

@ -0,0 +1,11 @@
.badge_details {
img {
width: 192px;
height: 192px;
object-fit: contain;
aspect-ratio: 1 / 1;
background-color: #fafafa;
border-radius: 8px;
border: 1px solid #f5f5f5;
}
}

34
app/assets/stylesheets/badges.scss
View file

@ -1,27 +1,19 @@
.sticker-book {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
.badge-container {
width: auto;
background-color: white;
a {
height: auto;
width: 45%;
margin-bottom: 45px;
}
.badge-image-conatiner {
width: auto;
display: flex;
aspect-ratio: 1 / 1;
background-color: #f5f5f5;
.badge-image {
max-width: 100%;
left: 0;
&.unearned {
filter: opacity(20%) contrast(0);
}
}
@media screen and (min-width: 650px) {
a {
min-height: 200px;
width: 200px;
.badge-image {
object-fit: contain;
width: 100%;
aspect-ratio: 1 / 1;
}
}
}
}

4
app/assets/stylesheets/crayons.scss
View file

@ -46,3 +46,7 @@
@import 'components/drawer-navigation';
@import 'config/generator';
@import 'badge_details';
@import 'badges';

3
app/views/badges/_badge_detail.html.erb
View file

@ -1,6 +1,5 @@
<div class="grid grid-cols-1 gap-1 s:gap-8 s:grid-cols-2">
<div class="badge_details grid grid-cols-1 gap-1 s:gap-8 s:grid-cols-2">
<img
style="width: 192px; height: 192px; background-color: #FAFAFA; border-radius: 8px; border: 1px solid #F5F5F5;"
class="flex flex-row p-3"
src="<%= optimized_image_url(badge.badge_image_url, width: 192) %>"
alt="<%= badge.title %> badge"

8
app/views/badges/index.html.erb
View file

@ -9,12 +9,10 @@
<div
role="button"
onclick="window.Forem.showModal({prompt: true, contentSelector: '#badge-<%= badge.id %>', overlay: true})"
style="width:auto; background-color: white;"
class="crayons-card media-card media-card--all">
<div style="background-color: #F5F5F5" class="p-3">
class="badge-container crayons-card media-card">
<div class="badge-image-conatiner p-3">
<img
style="width: 100%; aspect-ratio:1/1;"
class="badge-image <%= "unearned" unless badge.id.in?(@earned_badge_achievements) %>"
class="badge-image"
src="<%= optimized_image_url(badge.badge_image_url, width: 192) %>"
alt="<%= badge.title %> badge"
title="<%= badge.title %>"

2
app/views/users/_badges_area.html.erb
View file

@ -12,7 +12,7 @@
<img src="<%= optimized_image_url(achievement.badge_image_url, width: 180) %>"
alt="<%= achievement.badge_title %>"
class="mx-auto max-w-75 h-auto align-middle"
style="transform: rotate(<%= rand(-10..10) %>deg);"
style="object-fit: contain; width: 100%; aspect-ratio: 1 / 1; transform: rotate(<%= rand(-10..10) %>deg);"
loading="lazy" />
</div>