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

View File

@@ -48,8 +48,12 @@ body {
line-height: 40px;
}
@media (min-width: 768px) {
.navbar-brand {
width: 280px;
}
}
.navbar-brand {
width: 280px;
text-align: center;
}
#navbarSupportedContent {
@@ -121,12 +125,19 @@ a:hover {
.leftCol {
position: relative;
height: 100%;
width: 310px;
flex: 0 0 auto;
width: 100%;
z-index: 9;
background: #ecedef;
background: white;
}
@media (min-width: 768px) {
.leftCol {
flex: 0 0 310px;
width: 310px;
height: 100%;
}
}
.files {
position: relative;
display: block;

View File

@@ -3,6 +3,8 @@
<html lang="en" ng-app="anonymous-github" ng-controller="mainController">
<head>
<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>
<script>
var base = document.createElement("base");
@@ -38,13 +40,13 @@
</head>
<body keypress-events class="d-flex flex-column">
<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="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>
</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">
<ol class="breadcrumb shadow paths">
<li class="breadcrumb-item" ng-repeat="p in paths" ng-bind="p">

View File

@@ -3,6 +3,8 @@
<html lang="en" ng-app="anonymous-github" ng-controller="mainController">
<head>
<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>
<base href="/" />

View File

@@ -8,7 +8,7 @@
<div class="col shadow overflow-auto h-100 d-flex align-content-end">
<div
class="p-0 py-2 m-auto"
ng-class="{'card': !repoUrl, 'w-50': !repoUrl,'container': repoUrl}"
ng-class="{'card': !repoUrl,'container': repoUrl}"
>
<form
class="form needs-validation"

View File

@@ -1,22 +1,29 @@
<div class="container-fluid h-100">
<div class="row h-100">
<div class="leftCol shadow p-1 h-100 overflow-auto">
<a class="btn btn-primary btn-block black_border" href="/anonymize">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Anonymize
</a>
<a
class="btn btn-block black_border"
href="/claim"
title="Claim the ownership of an existing anonymized repository."
data-toggle="tooltip"
data-placement="bottom"
>
Claim repository
</a>
<div class="leftCol shadow p-1 overflow-auto">
<div class="container">
<div class="row">
<div class="col-6 col-md-12 p-1">
<a class="btn btn-primary btn-block black_border" href="/anonymize">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Anonymize
</a>
</div>
<div class="col-6 col-md-12 p-1">
<a
class="btn btn-block black_border"
href="/claim"
title="Claim the ownership of an existing anonymized repository."
data-toggle="tooltip"
data-placement="bottom"
>
Claim repository
</a>
</div>
</div>
</div>
<h3>Filters</h3>
<div class="form-group">
<label for="search">Search</label>
<input
type="search"
class="form-control"
@@ -25,8 +32,10 @@
ng-model="search"
/>
</div>
<div class="form-group">
<label for="order">Order</label>
<div class="input-group">
<div class="input-group-prepend">
<label class="input-group-text" for="order">Sort</label>
</div>
<select class="custom-select" ng-model="orderBy">
<option value="repoId">Repository ID</option>
<option value="fullName">Repository</option>
@@ -37,7 +46,7 @@
</select>
</div>
<h5>Status</h5>
<div class="form-check">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
@@ -46,7 +55,7 @@
/>
<label class="form-check-label" for="ready"> Ready </label>
</div>
<div class="form-check">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
@@ -55,7 +64,7 @@
/>
<label class="form-check-label" for="expired"> Expired </label>
</div>
<div class="form-check">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
@@ -65,7 +74,7 @@
<label class="form-check-label" for="removed"> Removed </label>
</div>
</div>
<div class="col h-100 overflow-auto">
<div class="col-md h-100 overflow-auto">
<div class="row">
<div class="col p-0">
<table class="table repositories">

View File

@@ -10,7 +10,7 @@
<div class="row fadeIn main-options">
<!--Grid column-->
<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
</h3>
<hr class="hr-light my-4 w-75" />