mirror of https://github.com/realaravinth/gitpad
feat: improve gist view styling
parent
2b5596abd0
commit
b89a9004d4
|
@ -116,8 +116,11 @@ main {
|
||||||
flex: 4;
|
flex: 4;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
/*
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
*/
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -265,17 +268,16 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.gist__container {
|
.gist__container {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-family: Consolas, \"Liberation Mono\", Menlo, Courier, monospace;
|
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;
|
box-sizing: border-box;
|
||||||
padding: 10px 0;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
|
@ -314,10 +316,8 @@ summary::marker {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
|
@ -329,3 +329,64 @@ pre {
|
||||||
min-width: 35px;
|
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' %}
|
{% extends 'gistbase' %}
|
||||||
{% block gist_main %}
|
{% block gist_main %}
|
||||||
{% include "error_comp" %}
|
{% include "error_comp" %}
|
||||||
<div class="gist__container>
|
<div class="gist__container">
|
||||||
{% if payload %}
|
{% if payload %}
|
||||||
|
|
||||||
<p class="gist__name">
|
<div class="gist__meta-container">
|
||||||
<a href={{ gist_owner_link }}>{{ payload.owner }}</a>/<a href="">{{ payload.id | truncate(length=10) }}</a>
|
<div class="gist__name">
|
||||||
<span class="gist__visibility">{{ payload.visibility}}</span>
|
<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>
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
{% if payload.description %}
|
{% if payload.description %}
|
||||||
<p class="gist__description">{{ payload.description}}</p>
|
<p class="gist__description">{{ payload.description}}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="gist__data-container">
|
||||||
{% for payload_file in payload.files %}
|
{% for payload_file in payload.files %}
|
||||||
|
|
||||||
|
<div class="gist_file">
|
||||||
{% include "gist_filename" %}
|
{% include "gist_filename" %}
|
||||||
{% if "file" in payload_file.content %}
|
{% if "file" in payload_file.content %}
|
||||||
{% include "gist_textfile" %}
|
{% include "gist_textfile" %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
{% if "dir" in payload_file.content %}
|
{% if "dir" in payload_file.content %}
|
||||||
{% for payload_file in payload_file.content.dir %}
|
{% for payload_file in payload_file.content.dir %}
|
||||||
|
<div class="gist_file">
|
||||||
{% include "gist_filename" %}
|
{% include "gist_filename" %}
|
||||||
{% include "gist_textfile" %}
|
{% include "gist_textfile" %}
|
||||||
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue