Skip to content
This repository was archived by the owner on Feb 8, 2019. It is now read-only.

[bug 1137188] Stylize question field #124

Merged
rehandalal merged 1 commit into from
Mar 30, 2015
Merged

[bug 1137188] Stylize question field #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 0 additions & 20 deletions app/css/buddyup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,6 @@ html {
font-size: 10px;
}

/* footer */
footer button:hover {
cursor: pointer;
}
footer button {
background-color: #edecec;
border: none;
width: 13%;
font-size: 2rem;
}
[aria-hidden="true"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* overrides */
form[role="dialog"][data-type="confirm"] p {
font-size: 1rem;
Expand Down
34 changes: 30 additions & 4 deletions app/css/question.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,38 @@
#question_field {
.QuestionFooter {
border-top: 1px solid #e7e7e7;
}
.QuestionField {
background: none;
border: 0;
max-height: 100px;
color: #000;
font-size: 17px;
max-height: 142px; /* 20px (padding top/bottom) + 122px (5 rows of text) */
min-height: 44px; /* 20px (padding top/bottom) + 24px (1 row of text) */
overflow: auto;
padding: 0.5em 1em;
padding: 10px 15px;
outline: none;
resize: none;
width: 100%;
}
.QuestionField::-moz-placeholder {
color: #858585;
font-style: italic;
}
.QuestionSubmitButton {
Copy link
Copy Markdown
Contributor

@rik rik Mar 29, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of overriding all the building blocks, I think we can use <input type=submit>.

Copy link
Copy Markdown
Contributor

@rik rik Mar 29, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah no, that wouldn't work because of the icon using generated content. Then <a href="#"> should do it.

background: #fff;
border-left: 1px solid #e7e7e7;
cursor: pointer;
font-size: 28px;
height: auto;
justify-content: flex-end;
margin: 5px 0;
Copy link
Copy Markdown
Contributor

@rik rik Mar 30, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change this into a padding? That will help expand the tappable area.

position: relative;
text-align: center;
width: 64px;
}
.QuestionSubmitButton::before {
line-height: 36px;
}
.StartAskingMessage {
align-items: center;
color: #4d4d4d;
Expand All @@ -32,7 +58,7 @@
padding: 2px 0;
}
.SignInLink {
margin: 15px 15px 5px;
margin: 15px 15px 5px;
}

.QuestionThread {
Expand Down
5 changes: 5 additions & 0 deletions app/js/question_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@

var question_thread;
var question_form;
var question_submit_button;
var suggestions;
var thread_introduction;
var question_id;
Expand Down Expand Up @@ -435,6 +436,10 @@
question_form = document.getElementById('question_form');
question_form.addEventListener('submit', submit_comment);

question_submit_button =
document.getElementById('question_submit_button');
question_submit_button.addEventListener('click', submit_comment);

question_thread = document.getElementById('question-thread');
question_thread.addEventListener('click', handle_event);
suggestions = document.getElementById('suggestions');
Expand Down
6 changes: 3 additions & 3 deletions app/question.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ <h1>My Question</h1>
<ul id="comment-list" class="vbox"></ul>
</section>
</main>
<footer>
<footer class="QuestionFooter">
<form id="question_form" class="hbox">
<textarea id="question_field" rows="1" placeholder="Type your question"></textarea>
<button type="submit" data-icon-after="send"></button>
<textarea id="question_field" class="QuestionField" rows="1" placeholder="Write your message&hellip;"></textarea>
<a id="question_submit_button" class="QuestionSubmitButton vbox" data-icon="send"></a>
</form>
<div id="sign-in-link" class="SignInLink hide">
<a href="authentication.html" class="bb-button recommend">Sign in to reply</a>
Expand Down