Added <kbd> tag support to markdown editors in article posts and comm… (#1761)
* Added <kbd> tag support to markdown editors in article posts and comments. * Fixed typo in test. * Fixed test - now compares against inner html. * Removed .showpage-signi-cta as dead code was reinstated accidentally via git merge. * Use sass placeholder as no need to output the .kbd class in the css. * Reinstated original css as accidentally changed with merge.
This commit is contained in:
Carl Saunders
Ben Halpern
parent
5eab8d4962
commit
c1eecd1850
6 changed files with 1448 additions and 1374 deletions
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,243 +1,242 @@
|
|||
@import 'variables';
|
||||
#audiocontent{
|
||||
position:fixed;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
right:0px;
|
||||
z-index:15;
|
||||
#audiocontent {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 15;
|
||||
font-family: $helvetica;
|
||||
#progressBar {
|
||||
color:#fff;
|
||||
width:100%;
|
||||
height:48px;
|
||||
margin-top:100px;
|
||||
position:fixed;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
text-align:left;
|
||||
background:rgb(236, 236, 236);
|
||||
z-index:19;
|
||||
display:none;
|
||||
&.playing{
|
||||
display:block;
|
||||
}
|
||||
#episode-profile-image{
|
||||
height:48px;
|
||||
width:48px;
|
||||
}
|
||||
#animated-bars{
|
||||
position:absolute;
|
||||
bottom:-12px;
|
||||
left:-15px;
|
||||
width:80px;
|
||||
opacity:0.3;
|
||||
display:none;
|
||||
&.playing{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
#barPlayPause{
|
||||
height:48px;
|
||||
width:48px;
|
||||
background:rgb(32, 32, 32);
|
||||
position:absolute;
|
||||
left:48px;
|
||||
bottom:0px;
|
||||
cursor:pointer;
|
||||
.butt{
|
||||
width:30px;
|
||||
margin:10px 9px;
|
||||
}
|
||||
.pause-butt{
|
||||
display:none;
|
||||
}
|
||||
&.playing{
|
||||
.play-butt{
|
||||
display:none;
|
||||
}
|
||||
.pause-butt{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.showing{
|
||||
display:block;
|
||||
}
|
||||
.hidden{
|
||||
display:none;
|
||||
}
|
||||
#volume{
|
||||
height:48px;
|
||||
width:32px;
|
||||
background:rgb(32, 32, 32);
|
||||
position:absolute;
|
||||
left:96px;
|
||||
bottom:0px;
|
||||
cursor:pointer;
|
||||
img{
|
||||
padding:3px;
|
||||
margin-top:4px;
|
||||
margin-left:4px;
|
||||
margin-bottom:-11px;
|
||||
}
|
||||
#speed{
|
||||
font-weight:300;
|
||||
font-size:12px;
|
||||
padding:3px 0px;
|
||||
width:28px;
|
||||
margin-left:-0.5px;
|
||||
text-align:center;
|
||||
margin-top:2px;
|
||||
display:block;
|
||||
user-select: none;
|
||||
background:transparent;
|
||||
color:rgb(201, 201, 201);
|
||||
}
|
||||
.volume-icon-wrapper{
|
||||
padding:1px 0px;
|
||||
}
|
||||
#volumeindicator{
|
||||
.range-wrapper{
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:22px;
|
||||
background:rgb(32, 32, 32);
|
||||
z-index:30;
|
||||
width:0;
|
||||
overflow:hidden;
|
||||
transition: width 200ms ease-out 95ms;
|
||||
padding:8px 0px 5px;
|
||||
text-align:center;
|
||||
input{
|
||||
width:80%;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
@media screen and ( min-width: 430px ){
|
||||
&:hover{
|
||||
.range-wrapper{
|
||||
width:170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buffer-wrapper{
|
||||
height:48px;
|
||||
position:absolute;
|
||||
left:128px;
|
||||
right:0;
|
||||
bottom:0;
|
||||
cursor:pointer;
|
||||
#progress {
|
||||
background-color:#00ffa3; // red
|
||||
height:48px;
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
z-index:23;
|
||||
transition: width 0.25s ease-in-out;
|
||||
}
|
||||
#buffer {
|
||||
background-color:#96ffd9; // red
|
||||
height:48px;
|
||||
display:inline-block;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
z-index:22;
|
||||
transition: width 0.15s ease-in-out;
|
||||
}
|
||||
#time{
|
||||
position:absolute;
|
||||
right:30px;
|
||||
top:16px;
|
||||
z-index:23;
|
||||
color:rgb(161, 161, 161);
|
||||
font-size:13px;
|
||||
background:rgba(236, 236, 236, 0.74);
|
||||
padding:2px;
|
||||
}
|
||||
#closebutt {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-top: 100px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
text-align: left;
|
||||
background: rgb(236, 236, 236);
|
||||
z-index: 19;
|
||||
display: none;
|
||||
&.playing {
|
||||
display: block;
|
||||
}
|
||||
#episode-profile-image {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
#animated-bars {
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
left: -15px;
|
||||
width: 80px;
|
||||
opacity: 0.3;
|
||||
display: none;
|
||||
&.playing {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#barPlayPause {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background: rgb(32, 32, 32);
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
bottom: 0px;
|
||||
cursor: pointer;
|
||||
.butt {
|
||||
width: 30px;
|
||||
margin: 10px 9px;
|
||||
}
|
||||
.pause-butt {
|
||||
display: none;
|
||||
}
|
||||
&.playing {
|
||||
.play-butt {
|
||||
display: none;
|
||||
}
|
||||
.pause-butt {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.showing {
|
||||
display: block;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#volume {
|
||||
height: 48px;
|
||||
width: 32px;
|
||||
background: rgb(32, 32, 32);
|
||||
position: absolute;
|
||||
left: 96px;
|
||||
bottom: 0px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
padding: 3px;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
margin-bottom: -11px;
|
||||
}
|
||||
#speed {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
padding: 3px 0px;
|
||||
width: 28px;
|
||||
margin-left: -0.5px;
|
||||
text-align: center;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
color: rgb(201, 201, 201);
|
||||
}
|
||||
.volume-icon-wrapper {
|
||||
padding: 1px 0px;
|
||||
}
|
||||
#volumeindicator {
|
||||
.range-wrapper {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
right: 3px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: #535353;
|
||||
font-size: 13.5px;
|
||||
z-index: 25;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
transition: all 0.3s ease 0s;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
color: #ff4343;
|
||||
top: 0px;
|
||||
left: 22px;
|
||||
background: rgb(32, 32, 32);
|
||||
z-index: 30;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
transition: width 200ms ease-out 95ms;
|
||||
padding: 8px 0px 5px;
|
||||
text-align: center;
|
||||
input {
|
||||
width: 80%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 430px) {
|
||||
&:hover {
|
||||
.range-wrapper {
|
||||
width: 170px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buffer-wrapper {
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
left: 128px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
#progress {
|
||||
background-color: #00ffa3; // red
|
||||
height: 48px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 23;
|
||||
transition: width 0.25s ease-in-out;
|
||||
}
|
||||
#buffer {
|
||||
background-color: #96ffd9; // red
|
||||
height: 48px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 22;
|
||||
transition: width 0.15s ease-in-out;
|
||||
}
|
||||
#time {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 16px;
|
||||
z-index: 23;
|
||||
color: rgb(161, 161, 161);
|
||||
font-size: 13px;
|
||||
background: rgba(236, 236, 236, 0.74);
|
||||
padding: 2px;
|
||||
}
|
||||
#closebutt {
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
right: 3px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: #535353;
|
||||
font-size: 13.5px;
|
||||
z-index: 25;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
transition: all 0.3s ease 0s;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
color: #ff4343;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-progress{
|
||||
position:fixed;
|
||||
top:0;
|
||||
left:-20%;
|
||||
background:$green;
|
||||
z-index:100;
|
||||
height:43px;
|
||||
.navigation-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -20%;
|
||||
background: $green;
|
||||
z-index: 100;
|
||||
height: 43px;
|
||||
// display:none;
|
||||
width:0%;
|
||||
&.showing{
|
||||
display:block;
|
||||
width:140%;
|
||||
width: 0%;
|
||||
&.showing {
|
||||
display: block;
|
||||
width: 140%;
|
||||
animation: grow-width 3200ms ease-out, pulsate 1.4s infinite ease-in-out;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.live-link{
|
||||
color:$black;
|
||||
.live-link {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.live-article-indicator{
|
||||
.live-article-indicator {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index:100;
|
||||
z-index: 100;
|
||||
}
|
||||
.live-article-indicator-inner{
|
||||
padding:10px 20px;
|
||||
.live-article-indicator-inner {
|
||||
padding: 10px 20px;
|
||||
background: white;
|
||||
border: 2px solid $dark-purple;
|
||||
box-shadow: 5px 5px 0px $dark-purple;
|
||||
border-radius: 3px;
|
||||
max-width:calc(22vw + 96px);
|
||||
min-width:200px;
|
||||
display:none;
|
||||
@media screen and ( min-width: 1410px ){
|
||||
display:block;
|
||||
max-width: calc(22vw + 96px);
|
||||
min-width: 200px;
|
||||
display: none;
|
||||
@media screen and (min-width: 1410px) {
|
||||
display: block;
|
||||
}
|
||||
&:hover{
|
||||
&:hover {
|
||||
background: darkend($light-green, 3%);
|
||||
}
|
||||
.live-pre-header{
|
||||
font-size:1em;
|
||||
margin-top:2px;
|
||||
margin-left:25px;
|
||||
margin-bottom:15px;
|
||||
font-weight:800;
|
||||
.live-pre-header {
|
||||
font-size: 1em;
|
||||
margin-top: 2px;
|
||||
margin-left: 25px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 800;
|
||||
font-family: $helvetica-condensed;
|
||||
font-stretch:condensed;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
.live-article-title{
|
||||
font-size:1.4em;
|
||||
font-weight:600;
|
||||
.live-article-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 600;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.live-user{
|
||||
.live-user {
|
||||
font-weight: bold;
|
||||
color:$dark-medium-gray;
|
||||
img{
|
||||
color: $dark-medium-gray;
|
||||
img {
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
border-radius: 100px;
|
||||
|
|
@ -245,43 +244,66 @@
|
|||
vertical-align: -6px;
|
||||
}
|
||||
}
|
||||
.live-tags{
|
||||
.live-tags {
|
||||
margin: 8px 0px;
|
||||
color:$medium-gray;
|
||||
font-size:0.8em;
|
||||
.live-tag{
|
||||
margin-right:6px;
|
||||
color: $medium-gray;
|
||||
font-size: 0.8em;
|
||||
.live-tag {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.live-exit-button{
|
||||
border:0px;
|
||||
background:transparent;
|
||||
position:absolute;
|
||||
top:12px;
|
||||
right:8px;
|
||||
.live-exit-button {
|
||||
border: 0px;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 8px;
|
||||
padding: 5px 10px 1px;
|
||||
border-radius: 3px;
|
||||
&:hover{
|
||||
background:lighten($red,28%);
|
||||
&:hover {
|
||||
background: lighten($red, 28%);
|
||||
}
|
||||
img{
|
||||
height:15px;
|
||||
width:15px;
|
||||
img {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
%kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #959da5;
|
||||
}
|
||||
|
||||
@keyframes grow-width {
|
||||
0% { width: 0%; }
|
||||
100% { width: 140%; }
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
100% {
|
||||
width: 140%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {opacity: 0.25;}
|
||||
50% {opacity: 1.0;}
|
||||
100% {opacity: 0.25;}
|
||||
0% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
|
||||
.pulsating-circle {
|
||||
|
|
@ -316,28 +338,29 @@
|
|||
height: 100%;
|
||||
background-color: $dark-purple;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,.3);
|
||||
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
||||
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(.33);
|
||||
transform: scale(0.33);
|
||||
}
|
||||
80%, 100% {
|
||||
80%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-dot {
|
||||
0% {
|
||||
transform: scale(.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ class MarkdownParser
|
|||
renderer = Redcarpet::Render::HTMLRouge.new(hard_wrap: true, filter_html: false)
|
||||
markdown = Redcarpet::Markdown.new(renderer, REDCARPET_CONFIG)
|
||||
allowed_tags = %w(strong abbr aside em p h1 h2 h3 h4 h5 h6 i u b code pre
|
||||
br ul ol li small sup sub img a span hr blockquote)
|
||||
br ul ol li small sup sub img a span hr blockquote kbd)
|
||||
allowed_attributes = %w(href strong em ref rel src title alt class)
|
||||
ActionController::Base.helpers.sanitize markdown.render(@content).html_safe,
|
||||
tags: allowed_tags,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
class RenderedMarkdownScrubber < Rails::Html::PermitScrubber
|
||||
def initialize
|
||||
super
|
||||
self.tags = %w(a abbr add aside b blockquote br button center cite code col colgroup dd del dl dt em em figcaption h1 h2 h3 h4 h5 h6 hr i img li ol p pre q rp rt ruby small source span strong sub sup table tbody td tfoot th thead time tr u ul video)
|
||||
self.tags = %w(a abbr add aside b blockquote br button center cite code col colgroup dd del dl dt em em figcaption h1 h2 h3 h4 h5 h6 hr i img kbd li ol p pre q rp rt ruby small source span strong sub sup table tbody td tfoot th thead time tr u ul video)
|
||||
self.attributes = %w(alt class colspan data-conversation data-lang data-no-instant data-url em height href id loop name ref rel rowspan size span src start strong title type value width)
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -67,6 +67,14 @@ RSpec.describe MarkdownParser do
|
|||
end
|
||||
end
|
||||
|
||||
context "when provided with kbd tag" do
|
||||
it "leaves the kbd tag in place" do
|
||||
inline_kbd = generate_and_parse_markdown("<kbd>Ctrl</kbd> + <kbd>,</kbd>")
|
||||
inline_kbd = Nokogiri::HTML(inline_kbd).at("p").inner_html
|
||||
expect(inline_kbd).to eq("<kbd>Ctrl</kbd> + <kbd>,</kbd>")
|
||||
end
|
||||
end
|
||||
|
||||
describe "#tags_used" do
|
||||
let(:parsed_markdown) { described_class.new("{% youtube oHg5SJYRHA0 %}") }
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue