Responsive design fixes (#4508)

* reset to master

* build css

* Fixed spacing
This commit is contained in:
kolaente 2018-07-26 17:25:41 +02:00 committed by Lauris BH
parent f847884d16
commit 8d1ad55598
7 changed files with 113 additions and 7 deletions

File diff suppressed because one or more lines are too long

View file

@ -26,6 +26,13 @@
top: 7px;
left: 90%;
width: 15%;
@media only screen and (max-width: 768px) {
top: 10px;
left: auto;
width: auto;
right: 13px;
}
}
}
@ -40,12 +47,16 @@
right: 0!important;
left: auto!important;
}
@media only screen and (max-width: 768px) {
width: 100%;
}
}
.right.stackable.menu > .item.active {
color: #d9453d;
}
}
/* Accomodate for Semantic's 1px hacks on .attached elements */
.dashboard-repos {
margin: 0 1px;

View file

@ -102,7 +102,7 @@
.user.reset.password,
.user.signin,
.user.signup {
@input-padding: 200px!important;
@input-padding: 200px;
#create-page-form;
form {
width: 700px!important;
@ -113,6 +113,12 @@
.inline.field > label {
width: @input-padding;
}
.inline.field > label, input {
@media only screen and (max-width: 768px) {
width: 100% !important;
}
}
}
}
@ -137,19 +143,35 @@
padding-left: 0 !important;
text-align: center;
}
@media only screen and (max-width: 768px) {
label, input, .selection.dropdown {
width: 100% !important;
}
.field button, .field a {
margin-bottom: 1em;
width: 100%;
}
}
}
}
&.new.repo {
.ui.form {
.selection.dropdown:not(.owner) {
width: 50%!important;
}
@media only screen and (min-width: 768px) {
#auto-init {
margin-left: @create-page-form-input-padding+15px;
}
}
.selection.dropdown:not(.owner) {
width: 50%!important;
@media only screen and (max-width: 768px) {
width: 100% !important;
}
}
}
}
}
@ -175,3 +197,16 @@
font-family: monospace;
}
}
.new.org .ui.form {
@media only screen and (max-width: 768px) {
.field button, .field a{
margin-bottom: 1em;
width: 100%;
}
.field input {
width: 100% !important;
}
}
}

View file

@ -47,3 +47,16 @@
padding-top: 15px;
padding-bottom: @footer-margin * 2;
}
footer {
@media only screen and (max-width: 880px) {
text-align: center;
}
.ui.container .left, .ui.container .right {
@media only screen and (max-width: 880px) {
display: inline;
float: none;
}
}
}

View file

@ -172,9 +172,14 @@
#clone-panel {
width: 350px;
@media only screen and (max-width: 768px) {
width: 100%;
}
input {
border-radius: 0;
padding: 5px 10px;
width: 50%;
}
.clone.button {
@ -220,6 +225,12 @@
padding: 8px 10px;
font-weight: normal;
}
.ui.tiny.blue.buttons {
@media only screen and (max-width: 768px) {
width: 100%;
}
}
}
#repo-files-table {
@ -1229,6 +1240,20 @@
.prerelease.field {
margin-bottom: 0;
}
.field {
button, input {
@media only screen and (max-width: 438px) {
width: 100%;
}
}
button {
@media only screen and (max-width: 768px) {
margin-bottom: 1em;
}
}
}
}
&.forks {
@ -1756,3 +1781,9 @@ tbody.commit-list {
#repo-topic {
margin-top: 5px;
}
.new-dependency-drop-list {
@media only screen and (max-width: 768px) {
width: 100%;
}
}

View file

@ -37,6 +37,22 @@
}
}
}
#profile-avatar {
@media only screen and (max-width: 768px) {
height: 250px;
overflow: hidden;
img {
max-height: 768px;
max-width: 768px;
}
}
}
@media only screen and (max-width: 768px) {
width: 100%;
}
}
.ui.repository.list {

View file

@ -12,7 +12,7 @@
{{end}}
</h2>
{{template "base/alert" .}}
<form class="ui form grid" action="{{.Link}}" method="post">
<form class="ui form stackable grid" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<div class="ui seven wide column target">
<div class="inline field {{if .Err_TagName}}error{{end}}">