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

Mobile View: Padding Adjust (#19061)

Browse source 
* adjust bottom padding

* reset icon size

* resize spacing

* increase width for desktop drawer

* revert svg sizes

* set icon dimensions

* adjust styling to mock

* revert

* change the correct scss file
This commit is contained in:
Lawrence 2023-02-10 12:02:47 -06:00 • committed by GitHub
parent 051e46a84c
commit a4a54efc34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/assets/stylesheets/views/article.scss
View file

@ -141,7 +141,7 @@
--reaction-bg: transparent;
border: none;
padding: 0;
padding: var(--su-1);
background: transparent;
display: inline-flex;
flex-direction: row;
@ -168,7 +168,6 @@
}
&__icon {
padding: var(--su-2);
box-shadow: var(--reaction-border);
background: var(--reaction-bg);
color: var(--reaction-color);
@ -211,6 +210,10 @@
.crayons-reaction__icon--active {
display: block;
}
.crayons-reaction__count {
color: var(--reaction-color);
}
}
&--like {
@ -248,12 +251,13 @@
// This overrides some of the styles for the temporarily feature-flaged
.reaction-drawer .crayons-reaction {
border: 1px solid var(--card-bg);
border: 0px solid var(--card-bg);
flex-direction: column;
padding: 8px 8px 4px 8px;
&.user-activated {
background-color: var(--body-bg);
border: 1px solid #d4d4d4;
border: 0px solid #d4d4d4;
border-radius: 20px;
.crayons-reaction__icon--active {
@ -415,19 +419,18 @@
display: none; // Initially hidden
// Copying from Dropdown for now
padding: var(--su-2);
padding: var(--su-3);
min-width: 250px;
margin-top: var(--su-1);
z-index: var(--z-dropdown);
background: var(--card-bg);
color: var(--card-color);
box-shadow: var(--shadow-1);
border-radius: var(--radius);
flex-direction: column;
@media (min-width: $breakpoint-m) {
max-width: 360px;
max-width: 450px;
width: max-content;
top: -5px;
left: 55px;
@ -437,9 +440,14 @@
min-width: auto;
margin-left: 0;
display: block;
font-size: 14px;
}
}
.crayons-reaction_total_count {
color: var(--btn-color); // Mobile safari button text blue bug
}
.reaction-drawer__outer:hover .reaction-drawer {
@media (min-width: $breakpoint-m) {
display: block;
@ -477,11 +485,11 @@
height: 28px;
}
img {
svg {
margin: 3px 3px;
}
.aggregate_reactions_counter {
margin-left: 1em;
}
}
}

4
app/views/articles/_multireaction_button.html.erb
View file

@ -5,12 +5,12 @@
class="crayons-reaction crayons-tooltip__activator relative"
data-category="<%= category %>">
<span class="crayons-reaction__icon crayons-reaction__icon--inactive">
<%= image_tag image_path, aria_hidden: true, height: 24, width: 24 %>
<%= image_tag image_path, aria_hidden: true, height: 32, width: 32 %>
</span>
<%# TODO: This can be straightened out after feature-flag -- double icons are not required now %>
<% if user_signed_in? # We cannot trigger the action state unless the user is signed in, so no need to render. %>
<span class="crayons-reaction__icon crayons-reaction__icon--active">
<%= image_tag image_active_path, aria_hidden: true, height: 24, width: 24 %>
<%= image_tag image_active_path, aria_hidden: true, height: 32, width: 32 %>
</span>
<% end %>
<span class="crayons-reaction__count" id="reaction-number-<%= category %>"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span>