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

Fix Stackoverflow liquid embedded styles (#17541)

Browse source 
* Fix Stackoverflow liquid embedded styles

* Fix extend cryaons styles

* Remove unnecessary alt descriptions

* Extend header selector to apply styles to old tags

* Add pointer-events to nested anchor on legacy html

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
This commit is contained in:
Jeferson S. Brito 2022-05-26 07:59:32 -03:00 • committed by GitHub
parent 8b717374b7
commit 6f8c07aa69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/assets/stylesheets/ltags/StackexchangeTag.scss
View file

@ -2,13 +2,13 @@
.ltag__stackexchange--container {
max-width: 620px;
border: 1px solid $light-medium-gray;
border: 1px solid var(--base-60);
border-radius: 3px;
box-shadow: $shadow;
margin: 1.1em auto 1.3em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
font-family: var(--ff-sans-serif);
overflow: hidden;
padding-top: 1rem;
.ltag__stackexchange--title-container {
border-bottom: 1px solid #eaecef;
@ -19,23 +19,26 @@
display: flex;
justify-content: space-between;
.ltag__stackexchange--title {
h1 {
margin-left: 5px;
margin-bottom: 0;
margin-top: 8px;
font-size: 1.4em;
padding-bottom: 0;
h1,
.ltag__stackexchange--header {
font-size: var(--fs-l);
font-weight: var(--fw-normal);
line-height: var(--lh-base);
margin: 0em 0 0.5em;
padding: 0 var(--su-3);
.title-flare {
background: $sky-blue;
color: white;
padding: 0px 7px;
border-radius: 3px;
}
img {
height: 44px;
width: 44px;
width: var(--su-7);
display: inline-block;
vertical-align: -9px;
margin: 0 var(--su-2) 0 0;
vertical-align: middle;
}
}
}
@ -60,6 +63,7 @@
position: initial;
width: 16px;
height: 16px;
margin: var(--su-2) auto;
}
.ltag__stackexchange--score-number {
width: 100%;
@ -141,22 +145,17 @@
z-index: var(--z-elevate);
text-align: center;
position: relative;
box-shadow: 0px 0px 60px 42px #fff;
box-shadow: 0px 0px 60px 42px var(--card-bg);
box-shadow: 0 0 60px 42px var(--card-bg);
}
.ltag__stackexchange--btn {
color: #0366d6;
background-color: #f1f8ff;
border-radius: 3px;
line-height: 20px;
padding: 0.25em 1.2em;
opacity: 0.9;
font-weight: bold;
border: 1px solid #0366d6;
font-size: 0.75em;
&:hover {
opacity: 1;
@extend .crayons-btn !optional;
@extend .crayons-btn--secondary !optional;
// A deprecated version of this liquid tag's HTML included a link _inside_ a button :-/
// This `revert` is needed to make sure the button click still opens the content
a {
pointer-events: revert;
}
}
}

14
app/views/liquids/_stackexchange.html.erb
View file

@ -3,12 +3,12 @@
<header>
<div class="ltag__stackexchange--title">
<% logo_to_use = site == "stackoverflow" ? "stackoverflow-logo.svg" : "stackexchange-logo.svg" %>
<h1>
<div class="ltag__stackexchange--header">
<img src="<%= ActionController::Base.helpers.asset_path(logo_to_use) %>" alt="">
<a href="<%= post_url %>" target="_blank" rel="noopener noreferrer">
<%= post_type == "question" ? CGI.unescapeHTML(title) : t("views.liquids.stackexchange.answer.text_html", answer: tag.span(t("views.liquids.stackexchange.answer.answer"), class: "title-flare"), title: CGI.unescapeHTML(title)) %>
</a>
</h1>
<a href="<%= post_url %>" target="_blank" rel="noopener noreferrer">
<%= post_type == "question" ? CGI.unescapeHTML(title) : t("views.liquids.stackexchange.answer.text_html", answer: tag.span(t("views.liquids.stackexchange.answer.answer"), class: "title-flare"), title: CGI.unescapeHTML(title)) %>
</a>
</div>
<div class="ltag__stackexchange--post-metadata">
<span><%= Time.zone.at(created_at).strftime(t("time.formats.stackexchange")) %></span>
<% if post_type == "question" %>
@ -32,8 +32,6 @@
</p>
</div>
<div class="ltag__stackexchange--btn--container">
<button class="ltag__stackexchange--btn" type="button">
<a href="<%= post_url %>" target="_blank" rel="noopener noreferrer"><%= t("views.liquids.stackexchange.open.#{post_type}") %></a>
</button>
<a href="<%= post_url %>" class="ltag__stackexchange--btn" target="_blank" rel="noopener noreferrer"><%= t("views.liquids.stackexchange.open.#{post_type}") %></a>
</div>
</div>