mirror of
https://gitlab.com/comenius-institut/foerbico/metadata-form.git
synced 2025-12-09 16:24:30 +00:00
simplified some styling, added footer
This commit is contained in:
Mirjan Hoffmann
parent
87d6e412ef
commit
ad0b7a2311
1 changed files with 165 additions and 202 deletions
|
|
@ -26,47 +26,12 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
background-color: #ffffff;
|
||||
float: left;
|
||||
width: 20%;
|
||||
padding: 15px;
|
||||
margin-top: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
background-color: #e5e5e5;
|
||||
padding: 8px;
|
||||
margin-top: 7px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 40px;
|
||||
float: left;
|
||||
width: 60%;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
background-color: #ffffff;
|
||||
float: left;
|
||||
width: 20%;
|
||||
padding: 15px;
|
||||
margin-top: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-dropdown {
|
||||
background: #F1F6DF;
|
||||
color: #0A1F40;
|
||||
|
|
@ -75,177 +40,175 @@
|
|||
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="navbar-brand">
|
||||
<img src="logo.svg" height="50" width="116" alt="LOGO">
|
||||
</div>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarLanguageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span id="selectedLanguageLabel">DE</span>
|
||||
</a>
|
||||
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarLanguageDropdown">
|
||||
<a class="dropdown-item" onclick="changeLanguage('en')">English</a>
|
||||
<a class="dropdown-item" onclick="changeLanguage('de')">Deutsch</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div style="overflow:auto">
|
||||
<div class="menu"></div>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<div class="container">
|
||||
<h2 style="margin-bottom:40px;" data-i18n="FORM_HEADING">OER Metadaten Formular</h2>
|
||||
<form class="was-validated">
|
||||
<div class="form-group row">
|
||||
<label for="inputStatus" class="col-sm-2 col-form-label" data-i18n="LABEL_STATUS">Status</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="custom-select" id="inputStatus" required>
|
||||
<option value="Draft" data-i18n="LABEL_STATUS_DRAFT" selected>Entwurf</option>
|
||||
<option value="Incomplete" data-i18n="LABEL_STATUS_INCOMPLETE">Unvollständig</option>
|
||||
<option value="Published" data-i18n="LABEL_STATUS_PUBLISHED">Veröffentlicht</option>
|
||||
</select>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputUrl" class="col-sm-2 col-form-label" data-i18n="LABEL_URL">URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="url" class="form-control" id="inputUrl" placeholder="URL"
|
||||
data-i18n-placeholder="LABEL_URL" value="" required>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputTitle" class="col-sm-2 col-form-label" data-i18n="LABEL_TITLE">Titel</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="inputTitle" placeholder="Titel"
|
||||
data-i18n-placeholder="LABEL_TITLE" value="" required>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputDescription" class="col-sm-2 col-form-label"
|
||||
data-i18n="LABEL_DESCRIPTION">Beschreibung</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea class="form-control" id="inputDescription" placeholder="Beschreibung" data-i18n-placeholder="LABEL_DESCRIPTION"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputTags" class="col-sm-2 col-form-label" data-i18n="LABEL_KEYWORDS">Schlagworte</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="inputTags" placeholder="Komma getrennte Liste von Schlagworten"
|
||||
data-i18n-placeholder="LABEL_KEYWORDS_PLACEHOLDER" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputResourceType" class="col-sm-2 col-form-label" data-i18n="LABEL_LEARNINGRESOURCETYPE">Materialart</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputResourceType" data-i18n-title="LABEL_LEARNINGRESOURCETYPE_CHOOSE" required>
|
||||
</select>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="creator-list" class="col-sm-2 col-form-label" data-i18n="LABEL_CREATOR">Autor</label>
|
||||
<div class="col-sm-10 form-row">
|
||||
<ul class="list-group col" id="creator-list">
|
||||
<li class="list-group-item">
|
||||
<button type="button" onclick="addCreator()" class="btn btn-primary"><i class="fa fa-plus"></i> <span
|
||||
data-i18n="LABEL_CREATOR_ADD">Autor hinzufügen</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputLanguage" class="col-sm-2 col-form-label" data-i18n="LABEL_LANGUAGE">Sprache</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputLanguage" required>
|
||||
</select>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="choicesLicense" class="col-sm-2 col-form-label" data-i18n="LABEL_LICENSE">Lizenz</label>
|
||||
<div class="col-sm-7" id="choicesLicense">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseBY" value="BY"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_BY">darf ohne Namensnennung verwendet werden</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseSA" value="SA"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_SA">darf unter anderer Lizenz veröffentlicht werden</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseND" value="ND"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_ND">darf verändert werden</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseNC" value="NC"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_NC">darf kommerziell genutzt werden</span>
|
||||
<input type="hidden" id="licenseUrl"
|
||||
value="https://creativecommons.org/share-your-work/public-domain/cc0/">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="choicesLicense" id="choosenLicense" class="col-form-label">CC-0</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputSourceOrganization" class="col-sm-2 col-form-label" data-i18n="LABEL_ORGANIZATION">Institution</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSourceOrganization" data-live-search="true">
|
||||
<option value="" data-i18n="LABEL_CHOOSE" selected>Wähle ...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputSubjectOf" class="col-sm-2 col-form-label" data-i18n="LABEL_SUBJECT">Fach</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSubjectOf" data-live-search="true" data-i18n-title="LABEL_CHOOSE" multiple>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputImage" class="col-sm-2 col-form-label" data-i18n="LABEL_IMAGE_URL">Vorschaubild URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="url" class="form-control" id="inputImage" placeholder="Vorschaubild URL" data-i18n-placeholder="LABEL_IMAGE_URL" value="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" onclick="generate()" class="btn btn-primary"><i class="fa fa-arrow-down"></i> Generieren
|
||||
</button>
|
||||
<!-- <button type="button" onclick="read()" class="btn btn-primary"><i class="fa fa-arrow-up"></i>Einlesen</button> -->
|
||||
<div class="form-group">
|
||||
<label for="comment">YAML Metadaten</label>
|
||||
<textarea class="form-control" rows="5" id="comment"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
<div class="navbar-brand">
|
||||
<img src="logo.svg" height="50" width="116" alt="LOGO">
|
||||
</div>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarLanguageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span id="selectedLanguageLabel">DE</span>
|
||||
</a>
|
||||
<div class="dropdown-menu position-absolute dropdown-menu-right" aria-labelledby="navbarLanguageDropdown">
|
||||
<a class="dropdown-item" onclick="changeLanguage('en')">English</a>
|
||||
<a class="dropdown-item" onclick="changeLanguage('de')">Deutsch</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="container main">
|
||||
<h2 style="margin-bottom:40px;" data-i18n="FORM_HEADING">OER Metadaten Formular</h2>
|
||||
<form class="was-validated">
|
||||
<div class="form-group row">
|
||||
<label for="inputStatus" class="col-sm-2 col-form-label" data-i18n="LABEL_STATUS">Status</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="custom-select" id="inputStatus" required>
|
||||
<option value="Draft" data-i18n="LABEL_STATUS_DRAFT" selected>Entwurf</option>
|
||||
<option value="Incomplete" data-i18n="LABEL_STATUS_INCOMPLETE">Unvollständig</option>
|
||||
<option value="Published" data-i18n="LABEL_STATUS_PUBLISHED">Veröffentlicht</option>
|
||||
</select>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputUrl" class="col-sm-2 col-form-label" data-i18n="LABEL_URL">URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="url" class="form-control" id="inputUrl" placeholder="URL"
|
||||
data-i18n-placeholder="LABEL_URL" value="" required>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputTitle" class="col-sm-2 col-form-label" data-i18n="LABEL_TITLE">Titel</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="inputTitle" placeholder="Titel"
|
||||
data-i18n-placeholder="LABEL_TITLE" value="" required>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputDescription" class="col-sm-2 col-form-label"
|
||||
data-i18n="LABEL_DESCRIPTION">Beschreibung</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea class="form-control" id="inputDescription" placeholder="Beschreibung" data-i18n-placeholder="LABEL_DESCRIPTION"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputTags" class="col-sm-2 col-form-label" data-i18n="LABEL_KEYWORDS">Schlagworte</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="inputTags" placeholder="Komma getrennte Liste von Schlagworten"
|
||||
data-i18n-placeholder="LABEL_KEYWORDS_PLACEHOLDER" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputResourceType" class="col-sm-2 col-form-label" data-i18n="LABEL_LEARNINGRESOURCETYPE">Materialart</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputResourceType" data-i18n-title="LABEL_LEARNINGRESOURCETYPE_CHOOSE" required>
|
||||
</select>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback" data-i18n="LABEL_MANDATORY_FIELD">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="creator-list" class="col-sm-2 col-form-label" data-i18n="LABEL_CREATOR">Autor</label>
|
||||
<div class="col-sm-10 form-row">
|
||||
<ul class="list-group col" id="creator-list">
|
||||
<li class="list-group-item">
|
||||
<button type="button" onclick="addCreator()" class="btn btn-primary"><i class="fa fa-plus"></i> <span
|
||||
data-i18n="LABEL_CREATOR_ADD">Autor hinzufügen</span></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputLanguage" class="col-sm-2 col-form-label" data-i18n="LABEL_LANGUAGE">Sprache</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputLanguage" required>
|
||||
</select>
|
||||
<div class="valid-feedback"></div>
|
||||
<div class="invalid-feedback">Pflichtfeld</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="choicesLicense" class="col-sm-2 col-form-label" data-i18n="LABEL_LICENSE">Lizenz</label>
|
||||
<div class="col-sm-7" id="choicesLicense">
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseBY" value="BY"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_BY">darf ohne Namensnennung verwendet werden</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseSA" value="SA"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_SA">darf unter anderer Lizenz veröffentlicht werden</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseND" value="ND"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_ND">darf verändert werden</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" onclick="chooseLicense()" class="form-check-input" id="inputLicenseNC" value="NC"
|
||||
checked>
|
||||
<span data-i18n="LABEL_LICENSE_CHECKBOX_NC">darf kommerziell genutzt werden</span>
|
||||
<input type="hidden" id="licenseUrl"
|
||||
value="https://creativecommons.org/share-your-work/public-domain/cc0/">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="choicesLicense" id="choosenLicense" class="col-form-label">CC-0</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputSourceOrganization" class="col-sm-2 col-form-label" data-i18n="LABEL_ORGANIZATION">Institution</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSourceOrganization" data-live-search="true">
|
||||
<option value="" data-i18n="LABEL_CHOOSE" selected>Wähle ...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputSubjectOf" class="col-sm-2 col-form-label" data-i18n="LABEL_SUBJECT">Fach</label>
|
||||
<div class="col-sm-10">
|
||||
<select data-style="input-dropdown" data-width="100%" class="selectpicker" id="inputSubjectOf" data-live-search="true" data-i18n-title="LABEL_CHOOSE" multiple>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<label for="inputImage" class="col-sm-2 col-form-label" data-i18n="LABEL_IMAGE_URL">Vorschaubild URL</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="url" class="form-control" id="inputImage" placeholder="Vorschaubild URL" data-i18n-placeholder="LABEL_IMAGE_URL" value="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" onclick="generate()" class="btn btn-primary"><i class="fa fa-arrow-down"></i> Generieren
|
||||
</button>
|
||||
<!-- <button type="button" onclick="read()" class="btn btn-primary"><i class="fa fa-arrow-up"></i>Einlesen</button> -->
|
||||
<div class="form-group">
|
||||
<label for="comment">YAML Metadaten</label>
|
||||
<textarea class="form-control" rows="15" id="comment"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="right"></div>
|
||||
<footer class="bg-light text-center">
|
||||
<div class="text-center p-3">
|
||||
GitLab:
|
||||
<a class="text-dark" href="https://gitlab.com/oersi/metadata-form">https://gitlab.com/oersi/metadata-form</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue