eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Finish mod main page

Browse Source
This commit is contained in:
Jai A
2020-05-18 22:35:03 -07:00
parent 625617bb20
commit 251f1941a9
8 changed files with 207 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
static/css/mod.css
View File

@@ -31,6 +31,41 @@
margin: 0;
}
.mod-buttons {
display: flex;
flex-direction: column;
margin: 10px 30px 10px auto;
}
.mod-button {
margin: 5px 0;
display: flex;
flex-direction: row;
text-decoration: none;
width: 120px;
height: 30px;
}
.mod-button img {
margin: 5px 10px;
width: 20px;
}
.mod-button p {
margin: auto;
font-weight: bold;
}
.download-button {
background-color: #69E781;
color: white;
}
.follow-button {
background-color: red;
color: white;
}
.mod-bar {
display: flex;
flex-direction: row;
@@ -53,7 +88,13 @@
}
.mod-description div {
margin: 0 5px;
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.mod-description img {
max-width: 1000px;
}
.mod-sidebar {
@@ -63,7 +104,7 @@
border-left: 1px solid darkgrey;
width: 20%;
height: 100vh;
min-height: 100vh;
background-color: white;
}
@@ -82,8 +123,20 @@
margin: 0 auto;
}
.mod-info p{
margin: 0 ;
.mod-info-entry {
display: flex;
flex-direction: row;
margin: 5px;
align-items: center;
}
.mod-info-entry img {
margin: 0 5px;
height: 15px;
}
.mod-info-entry p {
margin: 0 auto;
}
.sidebar-img {
@@ -98,8 +151,42 @@
width: 200px;
}
.categories {
display: flex;
flex-direction: row;
}
.categories img {
width: 40px;
margin: 0 10px;
}
.contributor-card {
display: flex;
flex-direction: row;
height: 50px;
width: 200px;
margin: 5px 0;
}
.contributor-card img {
width: 50px;
height: 50px;
margin-right: 10px;
}
.contributor-card-text {
display: flex;
flex-direction: column;
margin: auto;
}
.contributor-card-text a {
text-decoration: none;
}
.sidebar-line {
height: 1px;
height: 2px;
width: 80%;
background-color: darkgrey;
margin: 0 auto;

1
static/images/icon/category.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g id="File_system" data-name="File system"><path d="m61 32h-58l7.59-27.53a2 2 0 0 1 1.93-1.47h38.96a2 2 0 0 1 1.93 1.47z" fill="#004fac"/><path d="m61 32v25a4 4 0 0 1 -4 4h-50a4 4 0 0 1 -4-4v-25z" fill="#2488ff"/><path d="m56 32v22a4 4 0 0 1 -4 4h-48.859a3.989 3.989 0 0 0 3.859 3h50a4 4 0 0 0 4-4v-25z" fill="#006df0"/><path d="m8.253 28h47.494l-1.931-7h-43.632z" fill="#5eac24"/><path d="m49.954 7h-35.908l-1.931 7h39.77z" fill="#d80027"/><path d="m12.115 14-1.931 7h43.632l-1.931-7z" fill="#ffcd00"/><path d="m24.544 42.632a2 2 0 0 0 1.898 1.368h11.116a2 2 0 0 0 1.9-1.368l1.1-3.316a1 1 0 0 0 -.945-1.316h-15.226a1 1 0 0 0 -.948 1.316z" fill="#003f8a"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 752 B

1
static/images/icon/contributor.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

1
static/images/icon/created.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><circle cx="256" cy="256" fill="#fe8205" r="256"/><path d="m512 256c0-140.61-115.39-256-256-256v512c140.61 0 256-115.39 256-256z" fill="#fa5d0f"/><path d="m256 61c-107.52 0-195 87.48-195 195s87.48 196 195 196 195-88.48 195-196-87.48-195-195-195z" fill="#f0f7ff"/><path d="m451 256c0-107.52-87.48-195-195-195v391c107.52 0 195-88.48 195-196z" fill="#dfe7f4"/><path d="m256 121c-8.291 0-15 6.709-15 15v150c0 8.291 6.709 15 15 15s15-6.709 15-15v-150c0-8.291-6.709-15-15-15z" fill="#575f64"/><path d="m271 286v-150c0-8.291-6.709-15-15-15v180c8.291 0 15-6.709 15-15z" fill="#474f54"/><path d="m346 241h-90-30c-8.291 0-15 6.709-15 15s6.709 15 15 15h30 90c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#575f64"/><path d="m361 256c0-8.291-6.709-15-15-15h-90v30h90c8.291 0 15-6.709 15-15z" fill="#474f54"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 945 B

10
static/images/icon/download-alt.svg Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class="hovered-paths"><g><g>
<g>
<path d="M472,313v139c0,11.028-8.972,20-20,20H60c-11.028,0-20-8.972-20-20V313H0v139c0,33.084,26.916,60,60,60h392 c33.084,0,60-26.916,60-60V313H472z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
</g>
</g><g>
<g>
<polygon points="352,235.716 276,311.716 276,0 236,0 236,311.716 160,235.716 131.716,264 256,388.284 380.284,264 " data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
</g>
</g></g> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 782 B

1
static/images/icon/followers.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

50
static/images/icon/updated.svg
View File

@@ -1 +1,49 @@
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><circle cx="256" cy="256" fill="#fe8205" r="256"/><path d="m512 256c0-140.61-115.39-256-256-256v512c140.61 0 256-115.39 256-256z" fill="#fa5d0f"/><path d="m256 61c-107.52 0-195 87.48-195 195s87.48 196 195 196 195-88.48 195-196-87.48-195-195-195z" fill="#f0f7ff"/><path d="m451 256c0-107.52-87.48-195-195-195v391c107.52 0 195-88.48 195-196z" fill="#dfe7f4"/><path d="m256 121c-8.291 0-15 6.709-15 15v150c0 8.291 6.709 15 15 15s15-6.709 15-15v-150c0-8.291-6.709-15-15-15z" fill="#575f64"/><path d="m271 286v-150c0-8.291-6.709-15-15-15v180c8.291 0 15-6.709 15-15z" fill="#474f54"/><path d="m346 241h-90-30c-8.291 0-15 6.709-15 15s6.709 15 15 15h30 90c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#575f64"/><path d="m361 256c0-8.291-6.709-15-15-15h-90v30h90c8.291 0 15-6.709 15-15z" fill="#474f54"/></g></svg>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 468.134 468.134" style="enable-background:new 0 0 468.134 468.134;" xml:space="preserve">
<path style="fill:#DC8744;" d="M28.06,363.046L9.317,423.983l-8.763,28.468c-2.859,9.288,5.842,17.989,15.13,15.129l28.467-8.763
l60.939-18.743L28.06,363.046z"/>
<path style="fill:#3A556A;" d="M44.151,458.817l-28.467,8.763c-9.288,2.859-17.988-5.841-15.129-15.129l8.763-28.468L44.151,458.817
z"/>
<rect x="-19.151" y="194.604" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 511.5694 231.7721)" style="fill:#FCD462;" width="453.868" height="54.465"/>
<rect x="19.36" y="233.116" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 604.5447 270.2841)" style="fill:#F6C358;" width="453.868" height="54.465"/>
<path style="fill:#E56353;" d="M426.039,119.122L349.01,42.094l38.436-38.436c4.877-4.877,12.784-4.877,17.66,0l59.368,59.368
c4.877,4.877,4.877,12.784,0,17.66L426.039,119.122z"/>
<g>
<rect x="352.212" y="52.373" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 692.3092 -73.0846)" style="fill:#EBF0F3;" width="18.157" height="108.937"/>
<rect x="326.525" y="78.036" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 666.604 -11.1108)" style="fill:#EBF0F3;" width="18.157" height="108.937"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 945 B

After

Width:  |  Height:  |  Size: 1.6 KiB

62
templates/mod_editor.hbs
View File

@@ -28,11 +28,21 @@
<div class="main-flex">
<div class="main-content">
<div class="mod-header">
<img class="mod-icon" src="..." >
<img class="mod-icon" src="...">
<div class="mod-title">
<h3 class="mod-title-text">Mod Name</h3>
<h5 class="mod-title-text">Mod Description</h5>
</div>
<div class="mod-buttons">
<a class="mod-button follow-button" onclick="followMod()">
<img src="static/images/icon/donate.svg" alt="follow">
<p>Follow</p>
</a>
<a href="downloadFilePath" download="fileName" class="mod-button download-button" onclick="followMod()">
<img src="static/images/icon/download-alt.svg" alt="download">
<p>Latest</p>
</a>
</div>
</div>
<div class="mod-bar">
@@ -47,6 +57,8 @@
<div class="mod-description">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, lorem eget maximus cursus, quam est pellentesque leo, quis vulputate ante tellus et lacus. Vestibulum hendrerit finibus gravida. Nulla vitae faucibus massa. Nunc posuere ornare urna ut ultricies. Morbi a velit vestibulum, pulvinar massa nec, rhoncus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ante augue. Morbi nunc libero, ultrices vitae est nec, elementum blandit mauris. Aliquam venenatis faucibus massa in lobortis. Nunc tincidunt lectus in ultrices ultricies. Ut consectetur orci at ligula fringilla dapibus. Praesent porta, neque ut bibendum luctus, diam nibh auctor diam, eu condimentum enim nisi id erat. Nullam fringilla aliquam nulla sed lobortis. Sed ex neque, ultricies nec suscipit nec, aliquet ac mi. Aenean ut ultrices augue. Mauris ut sapien non arcu congue dapibus. Ut ornare ante odio, a rhoncus enim dignissim in. Vestibulum aliquet maximus nisi. Etiam fermentum velit quam, vitae molestie leo consequat malesuada. Vivamus felis nulla, egestas vitae efficitur in, vehicula eu ante. Nunc semper eu nibh sit amet iaculis. Proin eu finibus sapien, a luctus ante. Ut in congue massa. Cras malesuada magna est, id fringilla arcu tempor et. Proin fringilla orci ut tincidunt dictum. Nunc sodales ac urna sit amet fringilla. Donec eget dictum neque. Maecenas maximus libero sem, et lobortis diam imperdiet a. In ultrices quis massa id rutrum. Proin sit amet ex quis diam dapibus interdum vel a turpis. Cras elit ligula, bibendum id lacus id, feugiat mattis arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras elit libero, porttitor eu blandit quis, elementum eget massa. Duis ac quam in neque feugiat egestas. Quisque blandit libero nisl, non convallis neque vestibulum quis. Donec vitae malesuada erat, sed faucibus diam. Duis fringilla eros elit, a pulvinar lacus malesuada feugiat. Integer ac hendrerit arcu. Phasellus quis eros faucibus metus blandit volutpat. Curabitur auctor iaculis leo sit amet tincidunt. Nam odio urna, rutrum non sodales sit amet, euismod at justo. Quisque pharetra ipsum sed sollicitudin pulvinar. Aenean eget cursus tellus, et convallis nisi. Maecenas malesuada lobortis condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla convallis orci magna, quis gravida purus aliquet sit amet. Pellentesque fringilla at nulla sit amet mollis. Cras euismod lorem non justo rhoncus, ut euismod urna egestas. Etiam luctus id lacus ut eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras eget lectus at lacus hendrerit gravida non vitae ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed finibus tincidunt porta. Phasellus fringilla pulvinar pharetra. Praesent tristique mauris metus, vitae pellentesque est vestibulum id. Phasellus vitae nisi in nibh vehicula varius id hendrerit erat. Mauris tempus lorem eu nulla viverra facilisis. Phasellus posuere dui nunc, sit amet consectetur lacus scelerisque maximus.
<img src="https://i.imgur.com/RMH7G49.png">
<img src="https://i.imgur.com/QkjB9Bw.png">
</div>
</div>
</div>
@@ -56,10 +68,23 @@
<img src="static/images/icon/information.svg" class="sidebar-img" alt="Donate">
<h3>Information</h3>
</div>
<p>1,292,112 Downloads</p>
<p>Created on 4/20/2020</p>
<p>Updated on 5/4/2020</p>
<p>2390 Followers</p>
<div class="mod-info-entry">
<img src="static/images/icon/download.svg" alt="Downloads" >
<p>1,292,112</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/followers.svg" alt="Downloads" >
<p>2391</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/created.svg" alt="Downloads" >
<p>1,292,112</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/updated.svg" alt="Downloads" >
<p>5/4/2020</p>
</div>
</div>
<div class="sidebar-line"></div>
@@ -82,17 +107,34 @@
<div class="sidebar-line"></div>
<div class="categories-info sidebar-entry">
<h3>Categories</h3>
<div class="sidebar-info">
<img src="static/images/icon/category.svg" class="sidebar-img" alt="Donate">
<h3>Categories</h3>
</div>
<div class="categories">
<img alt="adventure" src="static/images/icon/adventure.svg"/>
<img alt="magic" src="static/images/icon/magic.svg"/>
<img alt="library" src="static/images/icon/library.svg" class="result-image"/>
</div>
</div>
<div class="sidebar-line"></div>
<div class="member-info sidebar-entry">
<h3>Contributors</h3>
<div class="sidebar-info">
<img src="static/images/icon/contributor.svg" class="sidebar-img" alt="Donate">
<h3>Contributors</h3>
</div>
<div class="contributor-card rounded-border gray-border">
<img src="static/images/icon/cursed.png" alt="">
<div class="contributor-card-text">
<a href="">Username</a>
<small>Role</small>
</div>
</div>
</div>
<div class="sidebar-line"></div>
</div>
</div>
</body>
</html>