improve mobile view

This commit is contained in:
tdurieux
2021-04-21 11:20:14 +02:00
parent 67311ae535
commit 2e761ca295
6 changed files with 52 additions and 28 deletions
+14 -3
View File
@@ -48,8 +48,12 @@ body {
line-height: 40px; line-height: 40px;
} }
@media (min-width: 768px) {
.navbar-brand {
width: 280px;
}
}
.navbar-brand { .navbar-brand {
width: 280px;
text-align: center; text-align: center;
} }
#navbarSupportedContent { #navbarSupportedContent {
@@ -121,12 +125,19 @@ a:hover {
.leftCol { .leftCol {
position: relative; position: relative;
height: 100%; flex: 0 0 auto;
width: 310px; width: 100%;
z-index: 9; z-index: 9;
background: #ecedef; background: #ecedef;
background: white; background: white;
} }
@media (min-width: 768px) {
.leftCol {
flex: 0 0 310px;
width: 310px;
height: 100%;
}
}
.files { .files {
position: relative; position: relative;
display: block; display: block;
+5 -3
View File
@@ -3,6 +3,8 @@
<html lang="en" ng-app="anonymous-github" ng-controller="mainController"> <html lang="en" ng-app="anonymous-github" ng-controller="mainController">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title ng-bind="title">Anonymous Github</title> <title ng-bind="title">Anonymous Github</title>
<script> <script>
var base = document.createElement("base"); var base = document.createElement("base");
@@ -38,13 +40,13 @@
</head> </head>
<body keypress-events class="d-flex flex-column"> <body keypress-events class="d-flex flex-column">
<ng-include src="'/partials/header.htm'"></ng-include> <ng-include src="'/partials/header.htm'"></ng-include>
<div class="align-items-stretch h-100 w-100 overflow-auto"> <div class="h-100 w-100 overflow-auto">
<div class="container-fluid h-100"> <div class="container-fluid h-100">
<div class="row h-100"> <div class="row h-100">
<div class="leftCol shadow p-1 h-100 overflow-auto" ng-show="files"> <div class="leftCol shadow p-1 overflow-auto" ng-show="files">
<tree class="files" file="files"></tree> <tree class="files" file="files"></tree>
</div> </div>
<div class="col p-0 h-100 d-flex flex-column w-100 overflow-auto"> <div class="col-md h-100 overflow-auto p-0 d-flex flex-column">
<nav aria-label="breadcrumb"> <nav aria-label="breadcrumb">
<ol class="breadcrumb shadow paths"> <ol class="breadcrumb shadow paths">
<li class="breadcrumb-item" ng-repeat="p in paths" ng-bind="p"> <li class="breadcrumb-item" ng-repeat="p in paths" ng-bind="p">
+2
View File
@@ -3,6 +3,8 @@
<html lang="en" ng-app="anonymous-github" ng-controller="mainController"> <html lang="en" ng-app="anonymous-github" ng-controller="mainController">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title ng-bind="title">Anonymous Github</title> <title ng-bind="title">Anonymous Github</title>
<base href="/" /> <base href="/" />
+1 -1
View File
@@ -8,7 +8,7 @@
<div class="col shadow overflow-auto h-100 d-flex align-content-end"> <div class="col shadow overflow-auto h-100 d-flex align-content-end">
<div <div
class="p-0 py-2 m-auto" class="p-0 py-2 m-auto"
ng-class="{'card': !repoUrl, 'w-50': !repoUrl,'container': repoUrl}" ng-class="{'card': !repoUrl,'container': repoUrl}"
> >
<form <form
class="form needs-validation" class="form needs-validation"
+29 -20
View File
@@ -1,22 +1,29 @@
<div class="container-fluid h-100"> <div class="container-fluid h-100">
<div class="row h-100"> <div class="row h-100">
<div class="leftCol shadow p-1 h-100 overflow-auto"> <div class="leftCol shadow p-1 overflow-auto">
<a class="btn btn-primary btn-block black_border" href="/anonymize"> <div class="container">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Anonymize <div class="row">
</a> <div class="col-6 col-md-12 p-1">
<a <a class="btn btn-primary btn-block black_border" href="/anonymize">
class="btn btn-block black_border" <i class="fa fa-plus-circle" aria-hidden="true"></i> Anonymize
href="/claim" </a>
title="Claim the ownership of an existing anonymized repository." </div>
data-toggle="tooltip" <div class="col-6 col-md-12 p-1">
data-placement="bottom" <a
> class="btn btn-block black_border"
Claim repository href="/claim"
</a> title="Claim the ownership of an existing anonymized repository."
data-toggle="tooltip"
data-placement="bottom"
>
Claim repository
</a>
</div>
</div>
</div>
<h3>Filters</h3> <h3>Filters</h3>
<div class="form-group"> <div class="form-group">
<label for="search">Search</label>
<input <input
type="search" type="search"
class="form-control" class="form-control"
@@ -25,8 +32,10 @@
ng-model="search" ng-model="search"
/> />
</div> </div>
<div class="form-group"> <div class="input-group">
<label for="order">Order</label> <div class="input-group-prepend">
<label class="input-group-text" for="order">Sort</label>
</div>
<select class="custom-select" ng-model="orderBy"> <select class="custom-select" ng-model="orderBy">
<option value="repoId">Repository ID</option> <option value="repoId">Repository ID</option>
<option value="fullName">Repository</option> <option value="fullName">Repository</option>
@@ -37,7 +46,7 @@
</select> </select>
</div> </div>
<h5>Status</h5> <h5>Status</h5>
<div class="form-check"> <div class="form-check form-check-inline">
<input <input
class="form-check-input" class="form-check-input"
type="checkbox" type="checkbox"
@@ -46,7 +55,7 @@
/> />
<label class="form-check-label" for="ready"> Ready </label> <label class="form-check-label" for="ready"> Ready </label>
</div> </div>
<div class="form-check"> <div class="form-check form-check-inline">
<input <input
class="form-check-input" class="form-check-input"
type="checkbox" type="checkbox"
@@ -55,7 +64,7 @@
/> />
<label class="form-check-label" for="expired"> Expired </label> <label class="form-check-label" for="expired"> Expired </label>
</div> </div>
<div class="form-check"> <div class="form-check form-check-inline">
<input <input
class="form-check-input" class="form-check-input"
type="checkbox" type="checkbox"
@@ -65,7 +74,7 @@
<label class="form-check-label" for="removed"> Removed </label> <label class="form-check-label" for="removed"> Removed </label>
</div> </div>
</div> </div>
<div class="col h-100 overflow-auto"> <div class="col-md h-100 overflow-auto">
<div class="row"> <div class="row">
<div class="col p-0"> <div class="col p-0">
<table class="table repositories"> <table class="table repositories">
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="row fadeIn main-options"> <div class="row fadeIn main-options">
<!--Grid column--> <!--Grid column-->
<div class="col-md-12 mb-4 white-text text-center fadeIn"> <div class="col-md-12 mb-4 white-text text-center fadeIn">
<h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5"> <h3 class="display-4 font-weight-bold white-text mb-0 pt-5">
Anonymous GitHub Anonymous GitHub
</h3> </h3>
<hr class="hr-light my-4 w-75" /> <hr class="hr-light my-4 w-75" />