Add mod version selector to browse page tiles

This commit is contained in:
Andrew Miner
2017-03-31 20:47:39 -07:00
parent 3d9895a6d5
commit 407e3fca5d
4 changed files with 58 additions and 41 deletions
@@ -6,9 +6,12 @@
//- //-
.view__mod_tile .view__mod_tile
a .tile
.left a
img .left
.right img
p.title .right
p.description p.title
p.description
.view__mod_version_selector
@@ -6,48 +6,55 @@
// //
.view__mod_tile { .view__mod_tile {
min-width : $size-minecraft-block * 9;
display: flex; display: flex;
a { .tile {
@include floating-panel;
flex: 1 1 auto; flex: 1 1 auto;
border : $size-border-medium solid $color-background-panel; @include floating-panel;
color : $color-text; min-width : $size-minecraft-block * 9;
text-decoration : none;
display : flex; display: flex;
padding : $size-margin-medium; flex-direction: column;
& > .left { border : $size-border-medium solid $color-background-panel;
flex: 0 0 $size-minecraft-block * 4;
margin-right: $size-margin-medium;
img { a {
width: $size-minecraft-block * 4; flex: 1 1 auto;
max-height: $size-minecraft-block * 4; color : $color-text;
} text-decoration : none;
}
& > .right { display : flex;
flex : 1 1 100%; padding : $size-margin-medium;
overflow : hidden; & > .left {
flex: 0 0 $size-minecraft-block * 4;
margin-right: $size-margin-medium;
.title { img {
max-width: 0; width: $size-minecraft-block * 4;
margin-bottom : $size-margin-medium; max-height: $size-minecraft-block * 4;
}
font-family : $font-family-header;
font-size : $font-size-xlarge;
} }
.description { & > .right {
font-family : $font-family-text; flex : 1 1 100%;
font-size : $font-size-medium;
line-height : $font-size-medium * 1.5; overflow : hidden;
.title {
max-width: 0;
margin-bottom : $size-margin-medium;
font-family : $font-family-header;
font-size : $font-size-xlarge;
}
.description {
font-family : $font-family-text;
font-size : $font-size-medium;
line-height : $font-size-medium * 1.5;
}
} }
} }
@@ -55,13 +62,18 @@
background: $color-blue-faint; background: $color-blue-faint;
border-color: $color-link-normal; border-color: $color-link-normal;
& > .right { & a > .right {
.title { .title {
color: $color-link-normal; color: $color-link-normal;
text-decoration: underline; text-decoration: underline;
} }
} }
} }
.view__mod_version_selector {
margin: 0;
padding: $size-margin-small $size-margin-medium;
}
} }
&.disabled { &.disabled {
@@ -5,7 +5,8 @@
# All rights reserved. # All rights reserved.
# #
BaseController = require '../../base_controller' BaseController = require '../../base_controller'
ModVersionSelectorController = require '../../common/mod_version_selector/mod_version_selector_controller'
######################################################################################################################## ########################################################################################################################
@@ -19,6 +20,8 @@ module.exports = class ModTileController extends BaseController
# BaseController Overrides ##################################################################### # BaseController Overrides #####################################################################
onDidRender: -> onDidRender: ->
@modVersionSelector = @addChild ModVersionSelectorController, '.view__mod_version_selector', model:@model
@$link = @$('a') @$link = @$('a')
@$logoImage = @$('img') @$logoImage = @$('img')
@$title = @$('p.title') @$title = @$('p.title')
@@ -3,8 +3,7 @@
span.checkbox span.checkbox
span.label I have this mod in my modpack span.label I have this mod in my modpack
.version .version
span I'm using version: span Version:
select select
.warning. .warning.
<b>PLEASE NOTE:</b> By selecting "no", crafting plans, search, and other features will ignore items <b>PLEASE NOTE:</b> Crafting plans, search, and other features will ignore items and recipes from this mod.
and recipes from this mod.