Change playcards to sumdets
This commit is contained in:
parent
16ffc10625
commit
cfd5b0ca34
2 changed files with 225 additions and 28 deletions
149
backloggery.css
149
backloggery.css
|
|
@ -85,10 +85,7 @@ img {
|
|||
h1,h2 {
|
||||
font-family:Titillium Web,Tahoma,Arial,Helvetica,sans-serif;
|
||||
font-variant:small-caps;
|
||||
letter-spacing:2px
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing:2px;
|
||||
border-bottom:1px solid var(--active-text);
|
||||
font-size:18px;
|
||||
margin:30px 0 10px;
|
||||
|
|
@ -245,14 +242,17 @@ div.profile main {
|
|||
.game-item {
|
||||
margin-bottom:-3px;
|
||||
overflow:hidden;
|
||||
position:relative
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.game-item>div:first-child {
|
||||
.game-item>summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.game-item>summary:first-child {
|
||||
background-color:hsla(0,0%,100%,.05);
|
||||
border:2px solid rgba(0,0,0,.5);
|
||||
border-radius:4px;
|
||||
cursor: default;
|
||||
-webkit-box-align:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
|
|
@ -268,13 +268,13 @@ div.profile main {
|
|||
width:100%
|
||||
}
|
||||
|
||||
.game-item>div:first-child>div {
|
||||
.game-item>summary:first-child>div {
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform {
|
||||
.game-item>summary:first-child>.platform {
|
||||
background-color:var(--active-secondary);
|
||||
border-radius:3px 0 0 3px;
|
||||
color:var(--active-secondary-text);
|
||||
|
|
@ -283,32 +283,32 @@ div.profile main {
|
|||
overflow:hidden
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img,.game-item>div:first-child>.platform p {
|
||||
.game-item>summary:first-child>.platform img,.game-item>summary:first-child>.platform p {
|
||||
opacity:.85
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img {
|
||||
.game-item>summary:first-child>.platform img {
|
||||
position:relative;
|
||||
top:7px;
|
||||
width:35px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.platform img.bw {
|
||||
.game-item>summary:first-child>.platform img.bw {
|
||||
-webkit-filter:var(--platform-bw);
|
||||
filter:var(--platform-bw)
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status {
|
||||
.game-item>summary:first-child>.status {
|
||||
max-width:48px;
|
||||
padding:5px 9px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status img {
|
||||
.game-item>summary:first-child>.status img {
|
||||
margin-top:3px;
|
||||
max-width:32px
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text {
|
||||
.game-item>summary:first-child>.text {
|
||||
-webkit-box-flex:5;
|
||||
-ms-flex-positive:5;
|
||||
flex-grow:5;
|
||||
|
|
@ -316,7 +316,7 @@ div.profile main {
|
|||
text-align:left
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text>.title {
|
||||
.game-item>summary:first-child>.text>.title {
|
||||
font-family:Titillium Web,sans-serif;
|
||||
font-size:1.1rem;
|
||||
line-height:1.1rem;
|
||||
|
|
@ -324,7 +324,7 @@ div.profile main {
|
|||
}
|
||||
|
||||
@supports(-webkit-line-clamp:1) {
|
||||
.game-item>div:first-child>.text>.title {
|
||||
.game-item>summary:first-child>.text>.title {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:normal;
|
||||
|
|
@ -336,7 +336,7 @@ div.profile main {
|
|||
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.text>.markdown {
|
||||
.game-item>summary:first-child>.text>.markdown {
|
||||
font-size:.7rem;
|
||||
max-height:32px;
|
||||
opacity:.75;
|
||||
|
|
@ -348,7 +348,7 @@ div.profile main {
|
|||
}
|
||||
|
||||
@supports(-webkit-line-clamp:2) {
|
||||
.game-item>div:first-child>.text>.markdown {
|
||||
.game-item>summary:first-child>.text>.markdown {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:normal;
|
||||
|
|
@ -360,13 +360,13 @@ div.profile main {
|
|||
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.priority {
|
||||
.game-item>summary:first-child>.priority {
|
||||
max-width:56px;
|
||||
padding-right:10px;
|
||||
text-align:center
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.priority img {
|
||||
.game-item>summary:first-child>.priority img {
|
||||
margin-top:3px;
|
||||
max-width:32px;
|
||||
opacity:.5
|
||||
|
|
@ -374,11 +374,11 @@ div.profile main {
|
|||
|
||||
@media screen and (max-width:520px) {
|
||||
|
||||
.game-item>div:first-child>.text>.title {
|
||||
.game-item>summary:first-child>.text>.title {
|
||||
font-size:1rem
|
||||
}
|
||||
|
||||
.game-item>div:first-child>.status {
|
||||
.game-item>summary:first-child>.status {
|
||||
padding:5px
|
||||
}
|
||||
|
||||
|
|
@ -756,3 +756,106 @@ div.profile main {
|
|||
.library .unibar div:first-of-type span {
|
||||
margin-right:.5rem}
|
||||
}
|
||||
|
||||
/* NEW */
|
||||
|
||||
.game-item .game-info {
|
||||
-webkit-box-align:start;
|
||||
-ms-flex-align:start;
|
||||
align-items:flex-start;
|
||||
background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.05)),to(rgba(0,0,0,.05)));
|
||||
background-image:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05));
|
||||
border-radius:0 0 5px 5px;
|
||||
-webkit-box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
|
||||
box-shadow:inset 0 3px 10px rgba(0,0,0,.5);
|
||||
margin:-10px 8px 15px 30px;
|
||||
padding:10px;
|
||||
position:relative
|
||||
}
|
||||
|
||||
.game-item .game-info label {
|
||||
font-size:12px;
|
||||
font-weight:700;
|
||||
letter-spacing:.5px;
|
||||
margin-left:4px;
|
||||
opacity:.9;
|
||||
text-transform:uppercase
|
||||
}
|
||||
|
||||
.game-item .game-info .markdown,.game-item .game-info p {
|
||||
font-size:16px;
|
||||
margin:0 0 12px .3rem;
|
||||
padding:0
|
||||
}
|
||||
|
||||
.game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
margin:auto 15px;
|
||||
}
|
||||
|
||||
.game-item .game-info .history {
|
||||
-ms-flex-wrap:wrap;
|
||||
flex-wrap:wrap;
|
||||
width:100%
|
||||
}
|
||||
|
||||
.game-item .game-info .history .list {
|
||||
font-size:14px
|
||||
}
|
||||
|
||||
.game-item .game-info .history .list>div {
|
||||
display:-webkit-box;
|
||||
display:-ms-flexbox;
|
||||
display:flex
|
||||
}
|
||||
|
||||
.game-item .game-info .history .list>div>div:first-of-type {
|
||||
-webkit-box-flex:1;
|
||||
-ms-flex:1;
|
||||
flex:1;
|
||||
margin-right:5px;
|
||||
opacity:.65;
|
||||
text-align:right
|
||||
}
|
||||
|
||||
.game-item .game-info .history .list>div>div:last-of-type {
|
||||
-webkit-box-flex:2;
|
||||
-ms-flex:2;
|
||||
flex:2
|
||||
}
|
||||
|
||||
.game-item .game-info .box_2 {
|
||||
margin-right:15px
|
||||
}
|
||||
|
||||
.game-item .game-guest label {
|
||||
opacity:.5
|
||||
}
|
||||
|
||||
@media screen and (max-width:700px) {
|
||||
.game-item .game-info {
|
||||
margin-left:8px
|
||||
}
|
||||
|
||||
.game-item .game-info .box_2 {
|
||||
margin-right:0
|
||||
}
|
||||
|
||||
.game-item .game-info .data,.game-item .game-info .history,.game-item .game-info .review {
|
||||
display:block
|
||||
}
|
||||
|
||||
.game-item .game-info .data .box_1 div {
|
||||
display:inline-block;
|
||||
margin-right:1%;
|
||||
width:48%
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.history .box_1 {
|
||||
width: 95%;
|
||||
}
|
||||
|
|
|
|||
104
games.py
104
games.py
|
|
@ -178,10 +178,10 @@ decay = False
|
|||
def playcard(game,page):
|
||||
cardstring = ""
|
||||
if decay == True:
|
||||
cardstring += " <div class=\"game-item decay\">\n"
|
||||
cardstring += " <details class=\"game-item decay\">\n"
|
||||
else:
|
||||
cardstring += " <div class=\"game-item\">\n"
|
||||
cardstring += " <div>\n <div class=\"platform\">\n <div>\n"
|
||||
cardstring += " <details class=\"game-item\">\n"
|
||||
cardstring += " <summary>\n <div class=\"platform\">\n <div>\n"
|
||||
if game["console"] == "ps5":
|
||||
cardstring += " <img src=\"PS5.png\" title=\"PlayStation 5\" alt=\"PS5\" class=\"bw\">\n"
|
||||
elif game["console"] == "ps2":
|
||||
|
|
@ -252,7 +252,95 @@ def playcard(game,page):
|
|||
cardstring += " </div>\n <div class=\"priority\">\n <img src=\"nowplaying.png\" alt=\"⯈\" title=\"Now Playing\">\n </div>\n"
|
||||
except:
|
||||
cardstring += " </div>\n <div class=\"priority\">\n <span title=\"Normal\"/>\n </div>\n"
|
||||
cardstring += " </div>\n </div>\n"
|
||||
cardstring += " </summary>\n <div class=\"game-info game-guest\">\n <div class=\"data\">\n <div class=\"box_2\">\n"
|
||||
try:
|
||||
if len(game["recent"]) > 1:
|
||||
cardstring += " <div>\n <label>Notes</label>\n <div class=\"markdown\">" + game["recent"] + "</div>\n </div>\n"
|
||||
except:
|
||||
pass
|
||||
cardstring += " <div class=\"flex\">\n <div>\n <label>Status</label>\n <p>"
|
||||
try:
|
||||
if game["completed"]:
|
||||
cardstring += "Completed"
|
||||
except:
|
||||
try:
|
||||
if game["beaten"]:
|
||||
cardstring += "Beaten"
|
||||
except:
|
||||
try:
|
||||
if game["gameplay"]:
|
||||
if game["id"] in endlessgames:
|
||||
cardstring += "Endless"
|
||||
else:
|
||||
cardstring += "Unfinished"
|
||||
except:
|
||||
cardstring += "Unplayed"
|
||||
cardstring += "</p>\n </div>\n <div>\n <label>Currently</label>\n <p>"
|
||||
try:
|
||||
if game["gameplay"]:
|
||||
try:
|
||||
if game["completed"]:
|
||||
if game["gameplay"] > game["completed"]:
|
||||
if game["gameplay"] < (datetime.now() - timedelta(days=180)):
|
||||
cardstring += "Not playing"
|
||||
else:
|
||||
cardstring += "Playing"
|
||||
else:
|
||||
cardstring += "Not playing"
|
||||
except:
|
||||
try:
|
||||
if game["beaten"]:
|
||||
if game["gameplay"] > game["beaten"]:
|
||||
if game["gameplay"] < (datetime.now() - timedelta(days=180)):
|
||||
cardstring += "Not playing"
|
||||
else:
|
||||
cardstring += "Playing"
|
||||
else:
|
||||
cardstring += "Not playing"
|
||||
except:
|
||||
if game["gameplay"] < (datetime.now() - timedelta(days=180)):
|
||||
if game["id"] in endlessgames:
|
||||
cardstring += "Not playing"
|
||||
else:
|
||||
cardstring += "Paused"
|
||||
else:
|
||||
cardstring += "Playing"
|
||||
except:
|
||||
cardstring += "Not playing"
|
||||
cardstring += "</p>\n </div>\n </div>\n </div>\n <div class=\"box_1 m-r0\">\n <div>\n <label>Platform</label>\n <p>"
|
||||
if game["console"] == "ps5":
|
||||
cardstring += "PlayStation 5"
|
||||
elif game["console"] == "ps2":
|
||||
cardstring += "PlayStation 2"
|
||||
elif game["console"] == "ps3":
|
||||
cardstring += "PlayStation 3"
|
||||
elif game["console"] == "nintendo switch":
|
||||
cardstring += "Nintendo Switch"
|
||||
elif game["console"] == "nintendo ds":
|
||||
cardstring += "Nintendo DS"
|
||||
elif game["console"] == "nintendo 3ds":
|
||||
cardstring += "Nintendo 3DS"
|
||||
elif game["console"] == "xbox 360":
|
||||
cardstring += "XBox 360"
|
||||
elif game["console"] == "pc":
|
||||
cardstring += "PC"
|
||||
cardstring += "</p>\n </div>\n <div>\n <label>Last Updated</label>\n <p>" + game["lastupdate"].strftime("%Y-%m-%d") + "</p>\n </div>\n </div>\n </div>\n <div class=\"history\">\n <div class=\"box_1\">\n <h2>Milestones</h2>\n <div class=\"list\">\n <div>\n <div>" + game["initialdate"].strftime("%Y-%m-%d") + "</div>\n <div>\n Added</div>\n </div>\n"
|
||||
try:
|
||||
if game["firstplayed"]:
|
||||
cardstring += " <div>\n <div>" + game["firstplayed"].strftime("%Y-%m-%d") + "</div>\n <div>\n Started</div>\n </div>\n"
|
||||
except:
|
||||
pass
|
||||
try:
|
||||
if game["beaten"]:
|
||||
cardstring += " <div>\n <div>" + game["beaten"].strftime("%Y-%m-%d") + "</div>\n <div>\n Beaten</div>\n </div>\n"
|
||||
except:
|
||||
pass
|
||||
try:
|
||||
if game["completed"]:
|
||||
cardstring += " <div>\n <div>" + game["completed"].strftime("%Y-%m-%d") + "</div>\n <div>\n Completed</div>\n </div>\n"
|
||||
except:
|
||||
pass
|
||||
cardstring += " </div>\n </div>\n </div>\n </div>\n </details>\n"
|
||||
if page == "main":
|
||||
writeindex.write(cardstring)
|
||||
elif page == "library":
|
||||
|
|
@ -392,7 +480,13 @@ if yearcompleted > 0:
|
|||
if yearendless > 0:
|
||||
writeindex.write(" <circle id=\"circle\" r=\"15.91549430918954\" cy=\"21\" cx=\"21\" stroke-width=\"3\" stroke=\"hsla(275, 39%, 32%, 0.9)\" fill=\"transparent\" stroke-dasharray=\"" + str(yeartakeup) + " 100\">\n </circle>\n")
|
||||
|
||||
writeindex.write(" </svg>\n </div>\n </div>\n <div class=\"status-tally\">\n <div class=\"backlog-tally\">\n <div style=\"width: " + str(round(((backlog/total)*100),1)) + "%;\">\n <span>Active Backlog · " + str(backlog) + " · " + str(round(((backlog/total)*100),1)) + "%</span>\n </div>\n <div style=\"width: " + str(100 - round(((backlog/total)*100),1)) + "%;\">\n </div>\n </div>\n")
|
||||
writeindex.write(" </svg>\n </div>\n </div>\n <div class=\"status-tally\">\n <div class=\"backlog-tally\">\n <div style=\"width: " + str(round(((backlog/total)*100),1)) + "%;\">")
|
||||
if ((backlog/total)*100) > 50:
|
||||
writeindex.write("\n <span>Active Backlog · " + str(backlog) + " · " + str(round(((backlog/total)*100),1)) + "%</span>")
|
||||
writeindex.write("\n </div>\n <div style=\"width: " + str(100 - round(((backlog/total)*100),1)) + "%;\">")
|
||||
if ((backlog/total)*100) <= 50:
|
||||
writeindex.write("\n <span>Active Backlog · " + str(backlog) + " · " + str(round(((backlog/total)*100),1)) + "%</span>")
|
||||
writeindex.write("\n </div>\n </div>\n")
|
||||
|
||||
compare = []
|
||||
compare.append(unplayed)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue