zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-01 18:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add better flexbox column sizing

Browse Source
This commit is contained in:
John F
2015-04-11 19:50:17 -04:00
parent 3419042748
commit e696155162
3 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/sass/objects/_torrents.scss
+21 -4
View File
@@ -52,11 +52,11 @@
&--primary,
&--secondary {
flex: 1;
vertical-align: middle;
}
&--primary {
flex: 1;
flex: 2;
.torrent & {
color: $torrent--primary--foreground;
@@ -67,11 +67,12 @@
&--secondary {
display: flex;
flex: 2;
flex: 3;
font-size: 0.85em;
&--sub {
flex: 1;
padding: 0 2px;
vertical-align: middle;
}
.unit {
@@ -82,6 +83,22 @@
}
&--speed,
&--eta,
&--ratio,
&--peers,
&--seeds {
flex: 1;
}
&--size {
flex: 1.5;
}
&--completed{
flex: 2.5;
}
label {
display: block;
}
source/scripts/components/torrent-list/Torrent.js
+8 -8
View File
@@ -80,18 +80,18 @@ var Torrent = React.createClass({
<div className="torrent__details">
<span className="torrent__detail--primary">{torrent.name}: {torrent.state}</span>
<ul className="torrent__detail--list torrent__detail--secondary">
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--speed">
{uploadRate.value}
<em className="unit">{uploadRate.unit}</em>
</li>
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--speed">
{downloadRate.value}
<em className="unit">{downloadRate.unit}</em>
</li>
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--eta">
{eta}
</li>
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--completed">
<span>
{torrent.percentComplete}
<em className="unit">%</em>
@@ -101,17 +101,17 @@ var Torrent = React.createClass({
<em className="unit">{completed.unit}</em>
</span>
</li>
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--size">
{totalSize.value}
<em className="unit">{totalSize.unit}</em>
</li>
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--ratio">
{torrent.ratio}
</li>
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--peers">
Prs
</li>
<li className="torrent__detail--secondary--sub">
<li className="torrent__detail--secondary--sub torrent__detail--seeds">
Sds
</li>
</ul>
source/scripts/components/torrent-list/TorrentList.js
+10 -10
View File
@@ -58,19 +58,19 @@ var TorrentList = React.createClass({
return (
<ul className="torrent__list">
<header className="torrent__header">
<li className="torrent__header">
<span className="torrent__detail--primary">Name</span>
<div className="torrent__detail--secondary">
<span className="torrent__detail--secondary--sub">Up</span>
<span className="torrent__detail--secondary--sub">Down</span>
<span className="torrent__detail--secondary--sub">ETA</span>
<span className="torrent__detail--secondary--sub">Completed</span>
<span className="torrent__detail--secondary--sub">Size</span>
<span className="torrent__detail--secondary--sub">Ratio</span>
<span className="torrent__detail--secondary--sub">Peers</span>
<span className="torrent__detail--secondary--sub">Seeds</span>
<span className="torrent__detail--secondary--sub torrent__detail--speed">Up</span>
<span className="torrent__detail--secondary--sub torrent__detail--speed">Down</span>
<span className="torrent__detail--secondary--sub torrent__detail--eta">ETA</span>
<span className="torrent__detail--secondary--sub torrent__detail--completed">Completed</span>
<span className="torrent__detail--secondary--sub torrent__detail--size">Size</span>
<span className="torrent__detail--secondary--sub torrent__detail--ratio">Ratio</span>
<span className="torrent__detail--secondary--sub torrent__detail--peers">Peers</span>
<span className="torrent__detail--secondary--sub torrent__detail--seeds">Seeds</span>
</div>
</header>
</li>
{torrentList}
</ul>
);