mirror of https://github.com/realaravinth/gitpad
feat: improve gist view styling
parent
2b5596abd0
commit
b89a9004d4
|
@ -116,8 +116,11 @@ main {
|
|||
flex: 4;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
|
||||
display: flex;
|
||||
/*
|
||||
align-items: center;
|
||||
*/
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
|
@ -265,17 +268,16 @@ footer {
|
|||
}
|
||||
|
||||
.gist__container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 13px;
|
||||
font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace;
|
||||
margin: 10px 0;
|
||||
border: 1px solid var(--color-border-default, #ddd);
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
|
||||
}
|
||||
|
||||
.line {
|
||||
|
@ -314,10 +316,8 @@ summary::marker {
|
|||
display: block;
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.line {
|
||||
|
@ -329,3 +329,64 @@ pre {
|
|||
min-width: 35px;
|
||||
}
|
||||
|
||||
.gist_file {
|
||||
background: #eeee;
|
||||
border-radius: 6px;
|
||||
padding-bottom: 0px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gist__filename {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.gist__meta-container {
|
||||
flex: 1;
|
||||
max-height: 70px;
|
||||
min-height: 70px;
|
||||
display: flex;
|
||||
align-items: left;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.gist__data-container {
|
||||
width: 70%;
|
||||
flex: 2;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gist__name {
|
||||
margin-left: 60px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.gist__description {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.gist__visibility {
|
||||
display: inline-block;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
white-space: nowrap;
|
||||
border: 1px solid transparent;
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-radius: 2em;
|
||||
background: #ffa500;
|
||||
margin: auto 0px;
|
||||
}
|
||||
|
||||
.gist__name-text {
|
||||
display: inline;
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
@ -1 +1,3 @@
|
|||
<div class="gist__filename">{{ payload_file.filename }}</div>
|
||||
<div class="gist__filename">
|
||||
<a href="">{{ payload_file.filename }}</a>
|
||||
</div>
|
||||
|
|
|
@ -1,31 +1,39 @@
|
|||
{% extends 'gistbase' %}
|
||||
{% block gist_main %}
|
||||
{% include "error_comp" %}
|
||||
<div class="gist__container>
|
||||
<div class="gist__container">
|
||||
{% if payload %}
|
||||
|
||||
<p class="gist__name">
|
||||
<a href={{ gist_owner_link }}>{{ payload.owner }}</a>/<a href="">{{ payload.id | truncate(length=10) }}</a>
|
||||
<span class="gist__visibility">{{ payload.visibility}}</span>
|
||||
</p>
|
||||
|
||||
<div class="gist__meta-container">
|
||||
<div class="gist__name">
|
||||
<a href={{ gist_owner_link }}><h2 class="gist__name-text">~{{ payload.owner }}</a>/<a href="">{{ payload.id | truncate(length=10, end="") }}</h2></a><span class="gist__visibility">{{ payload.visibility }}</span>
|
||||
</div>
|
||||
{% if payload.description %}
|
||||
<p class="gist__description">{{ payload.description}}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="gist__data-container">
|
||||
{% for payload_file in payload.files %}
|
||||
|
||||
<div class="gist_file">
|
||||
{% include "gist_filename" %}
|
||||
{% if "file" in payload_file.content %}
|
||||
{% include "gist_textfile" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if "dir" in payload_file.content %}
|
||||
{% for payload_file in payload_file.content.dir %}
|
||||
<div class="gist_file">
|
||||
{% include "gist_filename" %}
|
||||
{% include "gist_textfile" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in New Issue