Plume/Plume
9
18
Fork 24
Code Issues 178 Pull requests 8 Releases 8 Wiki Activity

Fix certain improper rendering of forms #560

Merged
marek-lach merged 39 commits from fix-webkit-specific-rendering-of-forms into master 2019-05-06 18:18:54 +00:00
Conversation 7 Commits 39 Files changed 7 +28 -13
7 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/css/_article.scss
View file

@ -312,6 +312,7 @@ main .article-meta {
.popup:not(.show), .popup-bg:not(.show) {
display: none;
appearance: none;
}
.popup-bg {
@ -332,6 +333,7 @@ main .article-meta {
.cw-text {
display: none;
appearance: none;
}
input[type="checkbox"].cw-checkbox {

22
static/css/_forms.scss
View file

@ -10,6 +10,7 @@ input, textarea, select {
margin: auto;
padding: 1em;
box-sizing: border-box;
-webkit-appearance: textarea;
background: $form-input-background;
color: $black;
@ -23,7 +24,10 @@ input, textarea, select {
border-color: $purple;
}
}
form input[type="submit"] { margin: 2em auto; }
form input[type="submit"] {
margin: 2em auto;
-webkit-appearance: none;
}
textarea {
resize: vertical;
@ -38,6 +42,7 @@ input[type="checkbox"] {
margin: initial;
min-width: initial;
width: initial;
-webkit-appearance: checkbox;
}
/** Inline forms (containing only CSRF token and a <submit>, for protected links) **/
@ -54,7 +59,7 @@ form.inline {
cursor: pointer;
font-size: 1em;
width: auto;
-webkit-appearance: none;
-webkit-appearance: none;
&:not(.button) {
margin: 0;
@ -96,7 +101,10 @@ form.inline {
}
}
}
input[type="submit"] { display: block; }
input[type="submit"] {
display: block;
-webkit-appearance: none;
}
// Writing page
form.new-post {
@ -116,6 +124,7 @@ form.new-post {
min-height: 20em;
overflow-y: hidden;
resize: none;
-webkit-appearance: textarea;
}
input[type="submit"] {
background: $lightgray;
@ -126,8 +135,9 @@ form.new-post {
font-family: $playfair;
font-size: 1.5em;
}
input[type="submit"]:hover { background: $lightgray; }
-webkit-appearance: none;
input[type="submit"]:hover {
background: $lightgray;}
-webkit-appearance: none;
}
.button + .button {
elegaanz commented 2019-05-06 11:55:15 +00:00 (Migrated from github.com)
Review
Copy link

I think using the unprefixed appearence (if it works) would be better, because Safari may drop support for the prefixed version one day, as they are mostly used when the property is in "beta".

I think using the unprefixed `appearence` (if it works) would be better, because Safari may drop support for the prefixed version one day, as they are mostly used when the property is in "beta".
marek-lach commented 2019-05-06 13:45:21 +00:00 (Migrated from github.com)
Review
Copy link

Right. As you say, it's best to make these changes to be as universal, and platform agnostic as possible in the long-term.
I have now ammended the commits.

Right. As you say, it's best to make these changes to be as universal, and platform agnostic as possible in the long-term. I have now ammended the commits.
@ -157,4 +167,4 @@ header.center {
margin-left: 0;
margin-right: 0;
}
}
}

5
static/css/_global.scss
View file

@ -54,6 +54,7 @@ small {
.hidden {
display: none;
appearance: none;
}
/// Main
@ -109,7 +110,7 @@ main {
margin-bottom: 0.5em;
}
}
.cover {
padding: 0px;
margin: 0px;
@ -400,5 +401,5 @@ figure {
color: $purple;
border-bottom: 1px solid $purple;
}
}
}
}

1
static/css/_header.scss
View file

@ -10,6 +10,7 @@ header {
nav#menu {
position: relative;
display: none;
appearance: none;
transform: skewX(-15deg);
left: -1em;
padding: 1em 1em 1em 2em;

1
static/css/main.scss
View file

@ -41,6 +41,7 @@ html {
#content {
display: none;
appearance: none;
text-align: center;
}
}

4
templates/search/index.rs.html
View file

@ -6,7 +6,7 @@
@:base(ctx, i18n!(ctx.1, "Search"), {}, {}, {
elegaanz commented 2019-05-04 21:36:17 +00:00 (Migrated from github.com)
Review
Copy link

Why don't you add it to the stylesheet directly?

Why don't you add it to the stylesheet directly?
marek-lach commented 2019-05-04 22:17:23 +00:00 (Migrated from github.com)
Review
Copy link

Where do you mean, I am not too sure...sorry. In the .css files I have adressed every form and input field that I felt like it needed to be adressed. I have reformatted the line you higlighted, so it should be all fine now, I guess? :-)

Where do you mean, I am not too sure...sorry. In the `.css` files I have adressed every form and `input` field that I felt like it needed to be adressed. I have reformatted the line you higlighted, so it should be all fine now, I guess? :-)
elegaanz commented 2019-05-05 17:50:27 +00:00 (Migrated from github.com)
Review
Copy link

(sorry for the late reply)

You actually forgot this one: https://github.com/Plume-org/Plume/pull/560/files#diff-339bac14a232fb01418ef93c2cb5e1ecR6

I think if you add appearence: none here, you could remove all the inline styles and have them all in one place.

(sorry for the late reply) You actually forgot this one: https://github.com/Plume-org/Plume/pull/560/files#diff-339bac14a232fb01418ef93c2cb5e1ecR6 I think if you add `appearence: none` here, you could remove all the inline styles and have them all in one place.
marek-lach commented 2019-05-06 16:32:35 +00:00 (Migrated from github.com)
Review
Copy link

Unfortunately, in some cases, like with imput forms and buttons, there just has to be the -webkit prefix present, otherwise the buttons are disorted when it's just appearance: none;, and so the desired effect is not achievable otherwise it seems like...
Checkboxes are also rendered poorly without -webkit-appearance: checkbox;

I did try to keep the platform specific prefix only to an absolutely necessary minimum though.

Unfortunately, in some cases, like with imput forms and buttons, there just has to be the `-webkit` prefix present, otherwise the buttons are disorted when it's just `appearance: none;`, and so the desired effect is not achievable otherwise it seems like... Checkboxes are also rendered poorly without `-webkit-appearance: checkbox;` I did try to keep the platform specific prefix only to an absolutely necessary minimum though.
<h1>@i18n!(ctx.1, "Search")</h1>
<form method="get" id="form">
<input id="q" name="q" placeholder="@i18n!(ctx.1, "Your query")" type="search">
<input id="q" name="q" placeholder="@i18n!(ctx.1, "Your query")" type="search" style="-webkit-appearance: none;">
<details>
<summary>@i18n!(ctx.1, "Advanced search")</summary>
@input!(ctx.1, title (text), "Article title matching these words", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Title")))
@ -17,7 +17,7 @@
@input!(ctx.1, tag (text), "Containing these tags", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Tags")))
@input!(ctx.1, instance (text), "Posted on one of these instances", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Instance domain")))
@input!(ctx.1, author (text), "Posted by one of these authors", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Authors")))
@input!(ctx.1, author (text), "Posted by one of these authors", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Author(s)")))
@input!(ctx.1, blog (text), "Posted on one of these blogs", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Blog title")))
@input!(ctx.1, lang (text), "Written in this language", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Language")))
@input!(ctx.1, license (text), "Published under this license", &format!("placeholder=\"{}\"", i18n!(ctx.1, "Article license")))

6
templates/search/result.rs.html
View file

@ -4,14 +4,14 @@
@(ctx: BaseContext, query_str: &str, articles: Vec<Post>, page: i32, n_pages: i32)
@:base(ctx, i18n!(ctx.1, "Search result for \"{0}\""; query_str), {}, {}, {
<h1>@i18n!(ctx.1, "Search result")</h1>
@:base(ctx, i18n!(ctx.1, "Search result(s) for \"{0}\""; query_str), {}, {}, {
<h1>@i18n!(ctx.1, "Search result(s)")</h1>
<p>@query_str</p>
@if articles.is_empty() {
<section>
@if page == 1 {
<h2>@i18n!(ctx.1, "No result for your query")</h2>
<h2>@i18n!(ctx.1, "No results for your query")</h2>
} else {
<h2>@i18n!(ctx.1, "No more results for your query")</h2>
}