Responsive new repo page
This commit is contained in:
Joseph Schorr
parent
f87e77cc3f
commit
dca6b93592
5 changed files with 83 additions and 68 deletions
15
static/css/directives/ui/dockerfile-build-form.css
Normal file
15
static/css/directives/ui/dockerfile-build-form.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.dockerfile-build-form table td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dockerfile-build-form input[type="file"] {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.dockerfile-build-form .help-text {
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
.new-repo .required-plan {
|
||||
margin: 10px;
|
||||
margin-top: 20px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.new-repo .required-plan .alert {
|
||||
|
|
@ -66,6 +65,10 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.new-repo .repo-option-title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.new-repo .option-description {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -88,3 +91,8 @@
|
|||
.new-repo .initialize-repo .file-drop {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.new-repo .xs-label {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
|
@ -4717,21 +4717,6 @@ i.rocket-icon {
|
|||
margin-bottom: -16px;
|
||||
}
|
||||
|
||||
.dockerfile-build-form table td {
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dockerfile-build-form input[type="file"] {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.dockerfile-build-form .help-text {
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
|
||||
.restart-required {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<div class="dockerfile-build-form-element">
|
||||
<div ng-show="building">
|
||||
<div class="quay-spinner"></div>
|
||||
</div>
|
||||
<div class="cor-loader" ng-show="building"></div>
|
||||
<div ng-show="uploading">
|
||||
<span class="message">Uploading file {{ upload_file }}</span>
|
||||
<div class="progress progress-striped active">
|
||||
|
|
@ -11,44 +9,40 @@
|
|||
</div>
|
||||
|
||||
<div ng-show="!uploading && !building">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="vertical-align: middle;">Dockerfile or <code>.tar.gz</code> or <code>.zip</code>:</td>
|
||||
<td><input id="file-drop" class="file-drop" type="file" file-present="internal.hasDockerfile">
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<div class="help-text">If an archive, the Dockerfile must be at the root</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Base Image Pull Credentials:</td>
|
||||
<td>
|
||||
<!-- Select credentials -->
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-class="is_public ? 'active btn-info' : ''"
|
||||
ng-click="is_public = true">
|
||||
None
|
||||
</button>
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-class="is_public ? '' : 'active btn-info'"
|
||||
ng-click="is_public = false">
|
||||
<i class="fa fa-wrench"></i>
|
||||
Robot account
|
||||
</button>
|
||||
</div>
|
||||
<dl>
|
||||
<dt>Dockerfile or <code>.tar.gz</code> or <code>.zip</code>:</dt>
|
||||
<dd>
|
||||
<input id="file-drop" class="file-drop" type="file" file-present="internal.hasDockerfile">
|
||||
<div class="help-text">If an archive, the Dockerfile must be at the root</div>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<!-- Robot Select -->
|
||||
<div ng-show="!is_public" style="margin-top: 10px">
|
||||
<div class="entity-search" namespace="repository.namespace"
|
||||
placeholder="'Select robot account for pulling...'"
|
||||
current-entity="pull_entity"
|
||||
allowed-entities="['robot']"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<dl>
|
||||
<dt>Base Image Pull Credentials:</dt>
|
||||
<dd style="margin: 20px;">
|
||||
<!-- Select credentials -->
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-class="is_public ? 'active btn-info' : ''"
|
||||
ng-click="is_public = true">
|
||||
None
|
||||
</button>
|
||||
<button type="button" class="btn btn-default"
|
||||
ng-class="is_public ? '' : 'active btn-info'"
|
||||
ng-click="is_public = false">
|
||||
<i class="fa fa-wrench"></i>
|
||||
Robot account
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Robot Select -->
|
||||
<div ng-show="!is_public" style="margin-top: 10px">
|
||||
<div class="entity-search" namespace="repository.namespace"
|
||||
placeholder="'Select robot account for pulling...'"
|
||||
current-entity="pull_entity"
|
||||
allowed-entities="['robot']"></div>
|
||||
</div>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,13 @@
|
|||
<div class="section">
|
||||
<div class="new-header">
|
||||
<span class="namespace-selector-header">
|
||||
|
||||
<span class="visible-xs xs-label">Namespace:</span>
|
||||
<span class="namespace-selector" user="user" namespace="repo.namespace" require-create="true"></span>
|
||||
<span class="slash">/</span>
|
||||
|
||||
<span class="slash hidden-xs">/</span>
|
||||
|
||||
<span class="visible-xs xs-label">Repository Name:</span>
|
||||
<span class="name-container">
|
||||
<input id="repoName" name="repoName" type="text" class="form-control" placeholder="Repository Name" ng-model="repo.name"
|
||||
required autofocus data-trigger="manual" data-content="{{ createError }}" data-placement="right" ng-pattern="/^[.a-z0-9_-]+$/">
|
||||
|
|
@ -56,23 +61,28 @@
|
|||
<div class="row">
|
||||
|
||||
<div class="col-md-12">
|
||||
<div class="section-title">Repository Visibility</div>
|
||||
<div class="section">
|
||||
<div class="section-title">Repository Visibility</div>
|
||||
<br>
|
||||
<div class="repo-option">
|
||||
<input type="radio" id="publicrepo" name="publicorprivate" ng-model="repo.is_public" value="1">
|
||||
<i class="fa fa-unlock fa-large" data-title="Public Repository"></i>
|
||||
<div class="repo-option-title">
|
||||
<input type="radio" id="publicrepo" name="publicorprivate" ng-model="repo.is_public" value="1">
|
||||
<i class="fa fa-unlock fa-large" data-title="Public Repository"></i>
|
||||
<label for="publicrepo"><strong>Public</strong></label>
|
||||
</div>
|
||||
|
||||
<div class="option-description">
|
||||
<label for="publicrepo"><strong>Public</strong></label>
|
||||
<span class="description-text">Anyone can see and pull from this repository. You choose who can push.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="repo-option">
|
||||
<input type="radio" id="privaterepo" name="publicorprivate" ng-model="repo.is_public" value="0">
|
||||
<i class="fa fa-lock fa-large" data-title="Private Repository"></i>
|
||||
<div class="repo-option-title">
|
||||
<input type="radio" id="privaterepo" name="publicorprivate" ng-model="repo.is_public" value="0">
|
||||
<i class="fa fa-lock fa-large" data-title="Private Repository"></i>
|
||||
<label for="privaterepo"><strong>Private</strong></label>
|
||||
</div>
|
||||
|
||||
<div class="option-description">
|
||||
<label for="privaterepo"><strong>Private</strong></label>
|
||||
<span class="description-text">You choose who can see, pull and push from/to this repository.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -142,11 +152,14 @@
|
|||
|
||||
<div class="col-md-12">
|
||||
<div class="section">
|
||||
<div class="section-title">Upload Dockerfile or Archive</div>
|
||||
<div class="section-title">Initialize from Dockerfile</div>
|
||||
<div style="padding-top: 20px;">
|
||||
<div class="initialize-repo">
|
||||
<div class="dockerfile-build-form" repository="createdForBuild || repo" upload-failed="handleBuildFailed(message)"
|
||||
build-started="handleBuildStarted()" build-failed="handleBuildFailed(message)" start-now="createdForBuild"
|
||||
<div class="dockerfile-build-form" repository="createdForBuild || repo"
|
||||
upload-failed="handleBuildFailed(message)"
|
||||
build-started="handleBuildStarted()"
|
||||
build-failed="handleBuildFailed(message)"
|
||||
start-now="createdForBuild"
|
||||
is-ready="hasDockerfile" uploading="uploading" building="building"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue