glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

mapper profile mobile styling

Browse source
This commit is contained in:
Connor Turland 2016-10-24 14:23:05 +00:00
parent a9ef6feebd
commit 96d25cc91d
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/base.css.erb
View file

@ -957,7 +957,7 @@ font-family: 'din-regular', helvetica, sans-serif;
/* mapper card */ /* mapper card */
.mapper { .mapper {
float: left; display: inline-block;
width:220px; width:220px;
height:340px; height:340px;
font-size: 12px; font-size: 12px;
@ -989,10 +989,10 @@ font-family: 'din-regular', helvetica, sans-serif;
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
margin-top: 24px; margin-top: 24px;
padding: 0 16px; padding: 0 5%;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 189px; width: 90%;
overflow: hidden; overflow: hidden;
} }

5
app/assets/stylesheets/mobile.scss.erb
View file

@ -90,6 +90,11 @@
#exploreMaps > div { #exploreMaps > div {
margin-top: 70px; margin-top: 70px;
} }
.mapper {
width: 100%;
margin: 0 0 30px 0;
}
.map.newMap { .map.newMap {
a { a {

3
frontend/src/components/Maps/index.js
View file

@ -4,9 +4,10 @@ import Header from './Header'
import MapperCard from './MapperCard' import MapperCard from './MapperCard'
import MapCard from './MapCard' import MapCard from './MapCard'
// 220 wide + 16 padding on both sides
const MAP_WIDTH = 252 const MAP_WIDTH = 252
const MOBILE_VIEW_BREAKPOINT = 504 const MOBILE_VIEW_BREAKPOINT = 504
const MOBILE_VIEW_PADDING = 20 const MOBILE_VIEW_PADDING = 40
const MAX_COLUMNS = 4 const MAX_COLUMNS = 4
class Maps extends Component { class Maps extends Component {