Commit e5f8efc8 authored by Jon Parsons's avatar Jon Parsons Committed by Andrew Newdigate

Merge pull request #2436 from troupe/feature/mobile-fixes-for-topic-view

Fix mobile view for TopicContaier
parents 9f4b64cf 423481e7
......@@ -53,7 +53,8 @@
padding-right: 0;
@media @only-small {
flex-direction: column;
flex-wrap: wrap;
padding: 2rem;
}
}
......
......@@ -33,6 +33,8 @@
&:hover {
cursor: pointer;
}
@media @only-small { font-size: 2.8rem; }
}
.topic-search__beta-decoration {
......@@ -66,7 +68,11 @@
&:extend(.subdued-button-clouds--small all);
.topic-search-button();
@media @only-small { margin: 0; }
@media @only-small {
margin-left: auto;
padding-left: 1.5em;
padding-right: 1.5em;
}
}
.topic-search__watch-forum-button {
......
@import "../../colors";
@import (less, reference) "~gitter-styleguide/css/components/headings.css";
@import (less, reference) "~gitter-styleguide/css/components/buttons.css";
@import "../../colors";
@import "../../break-points";
.topic-header {
display: flex;
......@@ -24,6 +25,8 @@
color: @topic-header-color;
line-height: 1.1;
font-weight: 100;
@media @only-small { font-size: 2.8rem; }
}
.topic-header__title-input {
......
......@@ -12,12 +12,17 @@
@media @only-small {
padding: 2rem;
height: auto;
transition: transform .1s ease-out;
transform: translateY(33%);
}
}
.panel--reply-editor--active {
height: 25rem;
@media @only-small { height: auto; }
@media @only-small {
height: auto;
transform: none;
}
}
.reply-editor__form {
......
......@@ -10,7 +10,7 @@
transition: transform .2s;
@media @only-small {
margin-bottom: 22rem;
margin-bottom: 15rem;
}
}
......
......@@ -85,3 +85,12 @@ body {
@import "./components/topic/feed-item";
@import "./components/search/topics-search";
.only-small {
display: none;
@media @only-small { display: initial; }
}
.hide-only-small {
@media @only-small { display: none; }
}
......@@ -42,7 +42,8 @@ export default React.createClass({
<CreateTopicLink
groupUri={groupUri}
className="topic-search__create-topic-link">
Create Topic
<span className="hide-only-small">Create Topic</span>
<span className="only-small">+</span>
</CreateTopicLink>
</Panel>
</Container>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment