Skip to content

Commit

Permalink
add new tiles size tile-triple(-vertical), tile-quadro(-vertical)
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Jun 12, 2012
1 parent 508a4e3 commit 799562b
Show file tree
Hide file tree
Showing 4 changed files with 100 additions and 67 deletions.
10 changes: 7 additions & 3 deletions demo/css/metro.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

109 changes: 60 additions & 49 deletions demo/tiles.html
View file
Expand Up @@ -48,7 +48,10 @@
}
#section1 {
}
#section2, #section3 {
#section2 {

}
#section3 {
width: 320px !important;
}
.metro-sections {
Expand Down Expand Up @@ -154,116 +157,124 @@ <h1 class="start">Tiles / Плитка</h1>
</div>
<span class="tile-label">Maps</span>
</div>
<div class="tile">
<div class="tile bg-color-pink">
<div class="tile-icon-large">
<img src="img/Internet%20Explorer.png" />
</div>
<span class="tile-label">Internet Explorer</span>
</div>
<div class="tile tile-double bg-color-red">
<div class="tile-icon-large">
<img src="img/Pictures.png" />

<div class="tile tile-double tile-multi-content">
<div class="tile-content-main">
<div style="padding: 10px;">
<img src="img/Sunny.png" style="height: 96px; margin-right: 20px" class="place-left"/>
<div style="margin-left: 115px; margin-top: 10px">
<p style="font-size: 36px; margin-top: 0px;">12&#186;</p>
<p style="font-size: 18px; margin-top: 0px;">Киев, Украина</p>
<p style="font-size: 12px; margin-top: 5px">Солнечно, без осадков</p>
</div>
</div>
<span class="tile-label">Weather</span>
</div>
<div class="tile-content-sub bg-color-blueDark">
Ха! Привет я нижний блок
</div>
<span class="tile-label">Photos</span>
</div>

<div class="tile bg-color-orange">
<div class="tile-icon-large">
<img src="img/Libraries.png" />
</div>
<span class="tile-label">Libraries</span>
<span class="tile-counter">10</span>
</div>
<div class="tile tile-double bg-color-green">
<div class="tile-icon-large">
<img src="img/Calendar.png" />
</div>
<span class="tile-label">Calendar</span>
<span class="tile-counter">8 events</span>
</div>
<div class="tile tile-double">
<div class="tile-image">
<img src="img/windows-8-fish.jpg" />
</div>
<span class="tile-label">Desktop</span>
</div>

<div class="tile bg-color-darken">
<span class="tile-caption">XBOX LIVE!</span>
<div class="tile-icon-cover">
<img src="img/cheap-fallout-3-xbox-360.jpg" />
<div class="tile bg-color-pink">
<div class="tile-icon-large">
<img src="img/Internet%20Explorer.png" />
</div>
<span class="tile-label">Fallout 3</span>
<span class="tile-label">Internet Explorer</span>
</div>
<div class="tile bg-color-red">
<div class="tile">
<div class="tile-icon-large">
<img src="img/Pictures%20Library.png" />
<img src="img/Internet%20Explorer.png" />
</div>
<span class="tile-label">Camera</span>
<span class="tile-label">Internet Explorer</span>
</div>

<div class="tile tile-double tile-multi-content">
<div class="tile-content-main">
<div style="padding: 10px;">
<img src="img/Sunny.png" style="height: 96px; margin-right: 20px" class="place-left"/>
<div style="margin-left: 115px; margin-top: 10px">
<p style="font-size: 36px; margin-top: 0px;">12&#186;</p>
<p style="font-size: 18px; margin-top: 0px;">Киев, Украина</p>
<p style="font-size: 12px; margin-top: 5px">Солнечно, без осадков</p>
</div>
</div>
<span class="tile-label">Weather</span>
</div>
<div class="tile-content-sub bg-color-blueDark">
Ха! Привет я нижний блок
<div class="tile bg-color-darken">
<div class="tile-icon-large">
<img src="img/Internet%20Explorer.png" />
</div>
<span class="tile-label">Internet Explorer</span>
</div>
<div class="tile bg-color-green">
<div class="tile bg-color-yellow">
<div class="tile-icon-large">
<img src="img/Acer.png" />
<img src="img/Internet%20Explorer.png" />
</div>
<span class="tile-label">Acer Utilities</span>
<span class="tile-label">Internet Explorer</span>
</div>
<!--
<div class="tile bg-color-blueDark">
<div class="tile bg-color-orange">
<div class="tile-icon-large">
<img src="img/Amazon.png" />
<img src="img/Internet%20Explorer.png" />
</div>
<span class="tile-label">Amazon</span>
<span class="tile-label">Internet Explorer</span>
</div>
-->
</div>

<div class="metro-section" id="section2">

<a data-next="#section3" data-prior="#section2" href="#" class="next-section"></a>

<div class="tile tile-double bg-color-purple">
<div class="tile tile-triple bg-color-purple">
<div class="tile-icon-large">
<img src="img/Music.png" />
</div>
<span class="tile-label">Music</span>
</div>

<div class="tile">
<div class="tile-icon-large">
<img src="img/Android.png" />
</div>
<span class="tile-label">Android</span>
</div>

<div class="tile bg-color-orange">
<div class="tile-icon-large">
<img src="img/Remote%20Desktop.png" />
</div>
<span class="tile-label">Remote Desktop</span>
</div>
<div class="tile bg-color-greenDark">
<div class="tile-header">
Microsoft Visio 2010
<!--
<div class="tile tile-triple-vertical bg-color-yellow">
<div class="tile-icon-large">
<img src="img/Music.png" />
</div>
<img class="tile-icon" src="img/Visio.png" />
<span class="tile-label">Music</span>
</div>
<div class="tile bg-color-greenDark">
<div class="tile-header">
Microsoft PowerPoint 2010
</div>
<img class="tile-icon" src="img/PowerPoint.png" />
-->
<div class="tile tile-quadro tile-triple-vertical bg-color-red">
</div>

<div class="tile bg-color-orange">
</div>

<div class="tile bg-color-orange">
</div>

<div class="tile bg-color-orange">
</div>
</div>

Expand Down Expand Up @@ -302,7 +313,7 @@ <h1 class="start">Tiles / Плитка</h1>
</div>
</div>
<div class="metro">
<p class="tertiary-info">tiles click animation is currently disabled by in progress...</p>
<p class="tertiary-info">tiles click animation is currently disabled but in progress...</p>
</div>
<footer class="metro footer">
<p class="pull-right"><a href="#">Наверх</a></p>
Expand Down
44 changes: 29 additions & 15 deletions less/tiles.less
View file
Expand Up @@ -48,7 +48,7 @@
cursor: pointer;
overflow: hidden;
text-decoration: none;
padding-bottom: 1px;
//padding-bottom: 1px;

* {font-family: @baseFontFamily;}

Expand Down Expand Up @@ -161,35 +161,49 @@
}

.tile.tile-double {
width: @tileLarge;
width: @tileDouble;

.tile-icon-large {
margin-top: 20px;
margin-left: 107px;

img {
width: 96px;
height: 96px;
}
}
.tile-icon-cover, .tile-icon-large {
width: @tileLarge;
width: @tileDouble;
}
}
.tile.tile-double-vertical {
height: @tileLarge;
height: @tileDouble;

.tile-icon-large {
margin-top: 20px;
margin-left: 107px;

img {
width: 96px;
height: 96px;
}
}
.tile-icon-cover, .tile-icon-large {
height: @tileLarge;
height: @tileDouble;
}
}
.tile.tile-triple-vertical {
height: @tileTriple;
.tile-icon-large {
padding-top: @tileTriple / 2 - 96 / 2;
}
}
.tile.tile-quadro-vertical {
height: @tileQuadro;
.tile-icon-large {
padding-top: @tileQuadro / 2 - 96 / 2;
}
}
.tile.tile-triple {
width: @tileTriple;
.tile-icon-large {
width: @tileTriple;
}
}
.tile.tile-quadro {
width: @tileQuadro;
.tile-icon-large {
width: @tileQuadro;
}
}
}
Expand Down
4 changes: 4 additions & 0 deletions less/variables.less
View file
Expand Up @@ -30,6 +30,10 @@
@tileSmall: 150px;
@tileLarge: 310px;
@tileMargin: 5px;
@tileOne: 150px;
@tileDouble: @tileOne * 2 + @tileMargin * 2;
@tileTriple: @tileOne * 3 + @tileMargin * 4;
@tileQuadro: @tileOne * 4 + @tileMargin * 6;

@block-width: 190px;
@block-height: 130px;
Expand Down

0 comments on commit 799562b

Please sign in to comment.