scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

conference formatting tweaks for mobile

Browse source 
thanks @carljbowman!
This commit is contained in:
Matthew Taylor 2016-05-27 15:55:27 -04:00
parent b07b61c925
commit 74ac6e52bb
7 changed files with 75 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/footer/conference/footer.jsx
View file

@ -71,7 +71,7 @@ var ConferenceFooter = React.createClass({
</li>
</FlexRow>
</FlexRow>
<p>
<p className="legal">
Scratch is a project of the Lifelong Kindergarten Group at the MIT Media Lab.
</p>
</div>

2
src/components/footer/conference/footer.scss
View file

@ -50,7 +50,7 @@
}
li {
margin-bottom: .5rem;
margin: .0;
}
}
}

14
src/components/navigation/conference/navigation.scss
View file

@ -41,6 +41,20 @@
}
}
@media only screen and (max-width: $mobile - 1) {
.inner {
> ul {
li {
&.right {
ul {
flex-flow: row nowrap;
}
}
}
}
}
}
@media only screen and (max-width: $tablet - 1) {
height: 100px;

9
src/components/thumbnail/thumbnail.scss
View file

@ -14,14 +14,11 @@
.thumbnail-title,
#{$extras} {
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
white-space: nowrap;
word-wrap: break-word;
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.thumbnail-title {

38
src/views/conference/details/details.jsx
View file

@ -46,25 +46,29 @@ var ConferenceDetails = React.createClass({
] : [
<h2>{this.props.conferenceDetails.Title}</h2>,
<ul className="logistics">
<li>
<img src="/svgs/conference/schedule/presenter-icon.svg" alt="presenter icon" />
{this.props.conferenceDetails.Presenter}
</li>
<li>
<img src="/svgs/conference/schedule/time-icon.svg" alt="time icon" />
{this.props.conferenceDetails.Start} &ndash; {this.props.conferenceDetails.End}
</li>
<li>
<img src="/svgs/conference/schedule/event-icon.svg" alt="event icon" />
{this.props.conferenceDetails.Type}
</li>
<li>
<img src="/svgs/conference/schedule/location-icon.svg" alt="location icon" />
{this.props.conferenceDetails.Location}
</li>
{this.props.conferenceDetails.fetching ? [] : [
<li>
<img src="/svgs/conference/schedule/presenter-icon.svg" alt="presenter icon" />
{this.props.conferenceDetails.Presenter}
</li>,
<li>
<img src="/svgs/conference/schedule/time-icon.svg" alt="time icon" />
{this.props.conferenceDetails.Start} &ndash; {this.props.conferenceDetails.End}
</li>,
<li>
<img src="/svgs/conference/schedule/event-icon.svg" alt="event icon" />
{this.props.conferenceDetails.Type}
</li>,
<li>
<img src="/svgs/conference/schedule/location-icon.svg" alt="location icon" />
{this.props.conferenceDetails.Location}
</li>
]}
</ul>,
<div className="description">
{this.props.conferenceDetails.Description}
<p>
{this.props.conferenceDetails.Description}
</p>
</div>,
<div className="back">
{this.props.conferenceDetails.fetching ? [] : [

13
src/views/conference/details/details.scss
View file

@ -1,12 +1,18 @@
@import "../../../frameless";
#view {
@media only screen and (max-width: $tablet - 1) {
margin-top: 100px;
}
@media only screen and (max-width: $desktop - 1) {
text-align: left;
}
}
.details {
width: $cols8;
&.inner {
margin-top: 2rem;
@ -41,3 +47,10 @@
margin: 2rem 0;
}
}
//8 columns
@media only screen and (max-width: $desktop - 1) {
.details {
width: 100%;
}
}

22
src/views/conference/schedule/schedule.scss
View file

@ -102,6 +102,28 @@
}
}
@media only screen and (max-width: $mobile - 1) {
.sub-nav {
flex-wrap: nowrap;
}
.inner {
h2 {
&.breaking-title {
margin: 2rem 0 2rem;
height: 100%;
font-size: 1.5rem;
}
}
.agenda-item {
h3 {
font-size: 1.2rem;
}
}
}
}
@media only screen and (max-width: $tablet - 1) {
.inner {
h2 {