romanmir/TorrentParts
1
0
Fork 0
mirror of https://github.com/leoherzog/TorrentParts.git synced 2026-01-24 04:08:04 -08:00
Code Issues Packages Projects Releases Wiki Activity

More Progress

Browse Source 
Improve Responsive Breakpoints and Make Progress with Button Placement
This commit is contained in:
Leo Herzog
2020-11-02 22:10:06 -05:00
parent 4246a4e946
commit b370eb5bd9
2 changed files with 112 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@@ -11,7 +11,7 @@
<header>
<h1 id="logo">Torrent<span class="fad fa-magnet fa-fw"></span>Parts</h1>
<iframe src="https://ghbtns.com/github-btn.html?user=leoherzog&repo=TorrentParts&type=star&count=true" frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=leoherzog&repo=TorrentParts&type=star&count=true" frameborder="0" scrolling="0" width="90" height="20" title="GitHub"></iframe>
</header>
<div id="startButtons">
@@ -26,9 +26,21 @@
<div id="properties" style="display:none">
<button id="reset">
<span class="fas fa-minus-circle"></span> Reset
<span class="far fa-times fa-fw"></span>
</button>
<div id="download">
<button id="copyURL">
<span class="fas fa-share-alt fa-fw fa-2x" data-fa-transform="left-1"></span>
</button>
<button id="copyMagnet">
<span class="fas fa-magnet fa-fw fa-2x" data-fa-transform="down-1"></span>
</button>
<button id="downloadTorrent">
<span class="fas fa-file-download fa-fw fa-2x"></span>
</button>
</div>
<div class="property">
<label for="hash">Unique Hash</label>
<input id="hash" type="text" placeholder="" disabled/>
@@ -89,27 +101,6 @@
</table>
</div>
<div>
<div id="copyURL">
<span class="fa-stack fa-2x">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fas fa-share-alt fa-stack-1x fa-inverse" data-fa-transform="left-1"></span>
</span>
</div>
<div id="copyMagnet">
<span class="fa-stack fa-2x">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fas fa-magnet fa-stack-1x fa-inverse" data-fa-transform="down-1"></span>
</span>
</div>
<div id="downloadTorrent">
<span class="fa-stack fa-2x">
<span class="fas fa-circle fa-stack-2x"></span>
<span class="fas fa-file-download fa-stack-1x fa-inverse"></span>
</span>
</div>
</div>
</div>
<script src="bundle.min.js"></script>

103
style.css
View File

@@ -52,6 +52,7 @@ button {
border-radius: 900px;
text-align: center;
margin: auto;
cursor: pointer;
}
button:disabled {
@@ -72,15 +73,21 @@ header {
}
#startButtons {
height: 80px;
max-width: 960px;
margin: 64px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: space-evenly;
}
#startButtons > * {
width: 440px;
height: 36px;
}
#magnet {
text-align: center;
}
#torrent {
@@ -99,13 +106,32 @@ label[for="torrent"] {
}
#properties {
position: relative;
max-width: 960px;
background: var(--dark-blue);
margin: 80px 160px;
margin: 80px auto;
padding: 40px;
border-radius: 30px;
flex-direction: column;
justify-content: space-evenly;
}
#reset {
position: absolute;
top: -12px;
right: -12px;
}
#download {
position: absolute;
top: 0;
left: -28px;
display: flex;
flex-direction: column;
}
#download > * {
margin: 4px 0;
}
.property {
@@ -113,14 +139,81 @@ label[for="torrent"] {
margin: 20px 0px;
display: flex;
justify-content: space-between;
align-items: center;
}
.property > label {
width: 40%;
width: 160px;
text-align: right;
text-transform: uppercase;
margin: 0 auto;
}
.property > input {
width: 440px;
}
@media (max-width: 1080px) {
#reset {
top: 0px;
right: 8px;
}
#download {
justify-content: center;
width: 96%;
top: auto;
bottom: 16px;
left: auto;
right: auto;
flex-direction: row;
}
#download > * {
margin: 0 4px;
}
#properties {
padding-bottom: 80px !important;
}
}
@media (max-width: 900px) {
#startButtons {
flex-direction: column;
justify-content: space-around;
}
#properties {
margin: 0;
padding: 0 2vw;
width: 96vw;
}
.property {
margin: 8px 0;
flex-direction: column;
align-items: center;
}
.property > label {
width: fit-content;
margin: 8px 0;
}
input {
text-align: center;
}
}
@media (max-width: 460px) {
#startButtons > *, .property > input {
width: 95%;
}
}