Commit 2f4f76a3 authored by philippelke's avatar philippelke

search layout step by step :)

parent 140c1d37
.sidecontainerleft {
position:relative;
position:fixed;
color:black;
width:445px;
transition: margin-left 0.4s;
margin-bottom:80px;
z-index:1;
}
.searchtitle{
background:#fff;
padding:10px 20px;
font-size: 20px;
}
.containerSearch {
width:405px;
......@@ -32,21 +36,43 @@ form.searchForm div.form-check label {
.sidecontainerright {
/*margin-right:25%;*/
position:relative;
position:fixed;
right:0px;
margin:80px 0px;
z-index:1;
width:400px;
padding-bottom: 112px;
display:flex;
height:100%;
}
.ausgeblendet{
margin-left:-405px;
}
.searchdetails {
width:400px;
float:right;
background-color:rgba(255,255,255,0.85);
color:black;
box-shadow: 0px 0px 4px rgba(127,127,127,0.7);
padding-bottom:100px;
}
.searchdetails div{
margin-right:0px;
}
.elementwrap {
height:100%;
overflow:scroll;
display:block;
}
.elementfooter {
height:100%;
display:block;
border-top:1px solid #ccc;
padding:15px;
}
.elementedit{
float:left;
}
.elementlastedit{
float:right;
}
.searcheditPrepend {
......@@ -109,7 +135,7 @@ form.searchForm div.form-check label {
height:39px;
position:absolute;
left:405px;
top:38px;
top:126px;
line-height: 1.5;
border-radius: 20px;
border-top-left-radius: 0;
......@@ -144,9 +170,38 @@ div.list-group.search-results div div div.list-group-item.list-group-item-action
font-weight:bold;
color:#fff;
}
.elementdetails {
padding-left:15px;
}
.elementdiscription {
padding:0px;
}
.elementtitle {
padding:20px;
background:#fff;
}
.elementwrap {
overflow: scroll;
}
.collapseInfo {
border-bottom:1px solid #b6b6b5;
}
.collapseInfo, .collapseSharing, .collapseDescription {
padding:10px 10px;
background:#f7f7f7;
}
.collapseSharing, .collapseDescription {
border-bottom:1px solid #b6b6b5;
}
.collapse .card .card-body .row {
border-bottom:1px solid #b6b6b5;
}
.card {
border-radius:0px;
}
.searchdetails div .form-group {
margin-bottom:0px;
}
.btn-outline-secondary {
color: #6c757d;
......@@ -172,7 +227,7 @@ div.list-group.search-results div div div.list-group-item.list-group-item-action
.searchbox-text-only{
margin-left:10px;
color: #6d6d6d;
height: 10px;
/*height: 10px;*/
}
.searchbox-heading {
......
<div
[ngClass]="{'float-left':true, 'sidecontainerleft':true,'ausgeblendet':this.state=='hidden'}">
<div class="containerSearch float-left">
<!--
<ngb-tabset type="pills"> <ngb-tab id="freesearchtab"
title="Freie Suche"> <ng-template ngbTabContent>
title="Mache deinen Ort des guten Lebens sichtbar">
<ng-template ngbTabContent>
-->
<div class="tabContent">
<!--<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#fff" type="ball-spin-clockwise"></ngx-spinner>-->
<div class="searchtitle">Mache deinen Ort des guten Lebens
sichtbar</div>
<form [formGroup]="searchForm" class="searchForm">
<!--
<div class="form-check">
<input type="checkbox" class="form-check-input" /> <label
class="form-check-label"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>Alle Orte sehen</label>
</div>-->
<div class="list-group-item list-group-item-action">
<i aria-hidden="true" class="fa fa-map-marker fa-lg"></i> Alle Orte
sehen <label class="switch"><input type="checkbox"><span
class="slider round"></span> </label>
</div>
<div class="">
<input type="text" formControlName="searchPattern"
class="form-control searchinput"
placeholder="z.B. Dein Ort, Interesse, Projekt ..." />
class="form-control searchinput" placeholder="Wie heißt dein Ort?" />
<!-- old search button
<div class="input-group-append">
<button (click)="search()"
class="btn btn-outline-secondary search-button" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
-->
<div class="searchbutton float-right">
<div *ngIf="state=='visible'" class="searchbuttonPrepend">
<button (click)="search()" class="btn search-button"
type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="searchbutton float-right">
<div *ngIf="state=='visible'" class="searchbuttonPrepend">
<button (click)="search()" class="btn search-button"
type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
<!--
<div class="form-check">
<input type="checkbox" formControlName="searchInDescription"
class="form-check-input" /> <label class="form-check-label"
......@@ -37,23 +51,34 @@
<input type="checkbox" class="form-check-input" /> <label
class="form-check-label">Themen filtern</label>
</div>
-->
</form>
<div class="list-group search-results" *ngIf="hasResults">
<div *ngIf="osmNodes.length > 0">
<div class="searchbox-heading">Ergebnisse im GeoPortal</div>
<!-- <div class ="searchbox-subheading">Elemente aus dem GeoPortal:</div> -->
<div *ngFor="let elem of osmNodes">
<div
[ngClass]="{'list-group-item':true,'list-group-item-action':true,'selected-item':isCurrentElement(elem) }"
(click)="show(elem)">
<i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
{{elem.name}}
<div class="search-results-wrap">
<div class="" *ngIf="searched && this.osmNodes.length == 0">
<div class="searchbox-heading">Orte des guten Lebens</div>
<div class="searchbox-text-only">
<i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i>
Zu deinem Suchbegriff konnten wir leider kein Ort des guten Lebens
finden.<br>
</div>
</div>
<div class="list-group search-results"
*ngIf="this.osmNodes.length > 0">
<div class="searchbox-heading">Orte des guten Lebens</div>
<div *ngIf="osmNodes.length > 0">
<div *ngFor="let elem of osmNodes">
<div
[ngClass]="{'list-group-item':true,'list-group-item-action':true,'selected-item':isCurrentElement(elem) }"
(click)="show(elem)">
<i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
{{elem.name}}
</div>
</div>
</div>
</div>
<div div *ngIf="nominatimNodes.length > 0">
<div class="searchbox-subheading">Elemente aus OpenStreetMap:</div>
<div class="searchbox-subheading">Noch nicht als Orte des
guten Lebens markiert</div>
<div *ngFor="let elem of nominatimNodes">
<div
[ngClass]="{'list-group-item':true,'list-group-item-action':true,'selected-item':isCurrentElement(elem) }"
......@@ -66,25 +91,51 @@
</div>
</div>
</div>
<div class="list-group"
*ngIf="searched && this.nominatimNodes.length == 0">
<div class="searchbox-text-only">
Zu deinem Sucherbegriff konnten wir keinen Ort finden. Mehr
Informationen zu unserer Quelle findest du hier:
https://www.openstreetmap.de/.<br>
</div>
</div>
</div>
<div *ngIf="dataGroups.length > 0">
<br> <label>Daten-Gruppen</label>
<div class="list-group-item list-group-item-action"
*ngFor="let group of dataGroups">{{group.name}}</div>
</div>
<div class="searchreset">
<button class="btn btn-outline-secondary "
(click)="clearResults()">Suche zurücksetzen</button>
</div>
</div>
<div class="list-group" *ngIf="searched && !hasResults">
<!--
<div class="list-group search-results" *ngIf="searched && !hasResults">
<div class="searchbox-text-only">
keine Suchergebnisse.<br>
</div>
</div>
-->
<div class="list-group"
*ngIf="searched && this.nominatimNodes.length == 0">
<div class="searchbox-subheading">Noch nicht als Orte des
guten Lebens markiert</div>
<div class="searchbox-text-only">
<i class="fa fa-exclamation-triangle fa-lg" aria-hidden="true"></i>
Zu deinem Sucherbegriff konnten wir keinen Ort finden. Mehr
Informationen zu unserer Quelle findest du hier:
https://www.openstreetmap.de/.<br>
</div>
</div>
<div class="list-group" *ngIf="hasResults">
<div class="searchreset">
<button class="btn btn-outline-secondary "
(click)="clearResults()">Suche zurücksetzen</button>
</div>
</div>
</div>
</div>
</ng-template> </ngb-tab> <!--
<!-- </ng-template> </ngb-tab> -->
<!--
<ngb-tab id="topictab">
<ng-template ngbTabTitle>Nach Themen</ng-template>
<ng-template ngbTabContent>
......@@ -107,7 +158,8 @@
</div>
</ng-template>
</ngb-tab>
--> </ngb-tabset>
-->
<!-- </ngb-tabset> -->
</div>
<div class="ToggleSearch float-right">
......@@ -131,54 +183,59 @@
<div class="float-right sidecontainerright"
*ngIf="nodeService.detailView">
<div *ngIf="authService.loggedIn" class="searcheditPrepend"
<!-- <div *ngIf="authService.loggedIn" class="searcheditPrepend"
(click)="edit(nodeService.detailView)">
<div class="form-group item-detail name">
<button class="btn search-button" type="submit">
<i class="fa fa-pencil fa-lg" aria-hidden="true"></i>
</button>
</div>
</div> -->
<div class="searcheditPrepend">
<div *ngIf="state=='visible'" class="searchedetailstogglePrepend">
<div (click)="toggleVisibilityDetails();"
class="form-group item-detail name">
<label for="elementSearchDetails"
class="col-sm-1 col-form-label"><i
class="fa fa-angle-double-right" aria-hidden="true"></i></label>
</div>
</div>
<div *ngIf="state=='hidden'" class="searchedetailstogglePrepend">
<div (click)="toggleVisibilityDetails();"
class="form-group item-detail name">
<label for="elementSearchDetails"
class="col-sm-1 col-form-label"><i
class="fa fa-angle-double-left" aria-hidden="true"></i></label>
</div>
</div>
</div>
<div class="container searchdetails">
<div class="elementdetails">
<div class="form-group row item-detail name">
<label for="elementOsmid" class="col-sm-1 col-form-label"><i
class="fa fa-map-marker fa-lg" aria-hidden="true"></i></label>
<div class="col">
<input type="text" readonly class="form-control-plaintext"
id="elementName" value="{{nodeService.detailView.name}}">
</div>
<div class="col">
<input type="text" readonly class="form-control-plaintext"
id="elementName" value="{{nodeService.detailView.getDate()}}">
</div>
<div class="ToggleSearchDetails float-right">
<div *ngIf="state=='visible'" class="searchedetailstogglePrepend">
<div (click)="toggleVisibilityDetails();"
class="form-group item-detail name">
<label for="elementSearchDetails" class="col-sm-1 col-form-label"><i
class="fa fa-angle-double-right" aria-hidden="true"></i></label>
</div>
<div class="searchdetails">
<div class="elementdetails">
<div class="form-group row item-detail name">
<label for="elementOsmid" class="col-sm-1 col-form-label"><i
class="fa fa-map-marker fa-lg" aria-hidden="true"></i></label>
<div class="col">
<input type="text" readonly class="form-control-plaintext"
id="elementName" value="{{nodeService.detailView.name}}">
</div>
<div *ngIf="state=='hidden'" class="searchedetailstogglePrepend">
<div (click)="toggleVisibilityDetails();"
class="form-group item-detail name">
<label for="elementSearchDetails" class="col-sm-1 col-form-label"><i
class="fa fa-angle-double-left" aria-hidden="true"></i></label>
</div>
<div class="col">
<input type="text" readonly class="form-control-plaintext"
id="elementName" value="{{nodeService.detailView.getDate()}}">
</div>
</div>
</div>
</div>
<div class="elementwrap">
<div class="elementinfo">
<div class="elementinfo">
<div class="">
<div class="form-group">
<div (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseInfo"
class="collapseInfo">
<i class="fa fa-angle-down fa-lg" aria-hidden="true">&nbsp;</i> <strong>Allgemeine
Informationen</strong>
<i class="fa fa-undo fa-lg" aria-hidden="true">&nbsp;</i>Allgemeine
Informationen<i class="fa fa-angle-down fa-lg fa-right"
aria-hidden="true">&nbsp;</i>
</div>
</div>
<div id="collapseInfo" [ngbCollapse]="isCollapsed">
......@@ -215,85 +272,102 @@
</div>
</div>
</div>
</div>
</div>
<div class="elementdiscription">
<div class="">
<div class="form-group">
<div (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
aria-controls="collapseDescription" class="collapseDescription">
<i class="fa fa-angle-down fa-lg" aria-hidden="true">&nbsp;</i> <strong>Akteure
& Austausch</strong>
<div class="elementtitle">
<strong>Ein Ort des guten Lebens in den Kategorien...</strong>
</div>
<div class="elementdiscription">
<div class="">
<div class="form-group">
<div (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
aria-controls="collapseDescription" class="collapseDescription">
<i class="fa fa-undo fa-lg" aria-hidden="true">&nbsp;</i>Akteure
& Austausch<i class="fa fa-angle-down fa-lg fa-right"
aria-hidden="true">&nbsp;</i>
</div>
</div>
</div>
<div id="collapseDescription" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-body">
<div *ngIf="!authService.loggedIn"
class="form-group row item-detail">
<div class="col">{{nodeService.detailView.description}}</div>
</div>
<div *ngIf="authService.loggedIn" class="form-group">
<textarea class="form-control" id="descriptionTextarea"
rows="15">{{nodeService.detailView.description}}</textarea>
</div>
<div class="elementbli">
<div class="form-group row item-detail">
<label for="elementBli" class="col-sm col-form-label">
<strong>BLI-Dimensionen</strong>
</label>
<div id="collapseDescription" [ngbCollapse]="isCollapsed">
<div class="card ">
<div class="card-body">
<div *ngIf="!authService.loggedIn"
class="form-group row item-detail">
<div class="col">{{nodeService.detailView.description}}</div>
</div>
<!--<div *ngFor="let dimension of nodeService.detailView.dimensions"
<div *ngIf="authService.loggedIn" class="form-group">
<textarea class="form-control" id="descriptionTextarea"
rows="15">{{nodeService.detailView.description}}</textarea>
</div>
<div class="elementbli">
<div class="form-group row item-detail">
<label for="elementBli" class="col-sm col-form-label">
<strong>BLI-Dimensionen</strong>
</label>
</div>
<!--<div *ngFor="let dimension of nodeService.detailView.dimensions"
class="list-group">
<div class="list-group-item list-group-item-action" title="{{dimension.description}}">{{dimension.name}}</div>
</div>-->
<app-bli class="bli-app" [node]="nodeService.detailView"
[displayType]="checkboxes_non_icons"></app-bli>
</div>
<div class="elementpartner">
<div class="form-group row item-detail">
<label for="elementPartner" class="col-sm col-form-label">
<strong>Netzwerkpartner</strong>
</label>
<app-bli class="bli-app" [node]="nodeService.detailView"
[displayType]="checkboxes_non_icons"></app-bli>
</div>
<div *ngFor="let partner of nodeService.detailView.peers"
class="list-group">
<div class="list-group-item list-group-item-action">
<i class="fa fa-map-marker" aria-hidden="true"></i>{{partner.name}}<label
class="switch"><input type="checkbox"
[checked]="mapService.hasNode(partner)"
(change)="togglePeerVisibility(partner)"><span
class="slider round"></span></label>
<div class="elementpartner">
<div class="form-group row item-detail">
<label for="elementPartner" class="col-sm col-form-label">
Netzwerkpartner </label>
</div>
<div *ngFor="let partner of nodeService.detailView.peers"
class="list-group">
<div class="list-group-item list-group-item-action">
<i class="fa fa-map-marker" aria-hidden="true"></i>{{partner.name}}<label
class="switch"><input type="checkbox"
[checked]="mapService.hasNode(partner)"
(change)="togglePeerVisibility(partner)"><span
class="slider round"></span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="elementSharing">
<div class="">
<div class="form-group ">
<div class="elementSharing">
<div class="">
<div class="form-group ">
<div (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="isCollapsed" aria-controls="collapseInfo"
class="collapseSharing">
<i class="fa fa-angle-down fa-lg" aria-hidden="true">&nbsp;</i> <strong>Sharing</strong>
<div (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="isCollapsed" aria-controls="collapseInfo"
class="collapseSharing">
<i class="fa fa-undo fa-lg" aria-hidden="true">&nbsp;</i>Teilen
und Schenken<i class="fa fa-angle-down fa-lg fa-right"
aria-hidden="true">&nbsp;</i>
</div>
</div>
</div>
<div id="collapseSharing" [ngbCollapse]="isCollapsed">
<div class="card">
<div class="card-body"></div>
<div id="collapseSharing" [ngbCollapse]="isCollapsed">
<div class="card container">
<div class="card-body"></div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
<div class="elementfooter">
<div class="elementedit">
<div class="elementeditbuttonwrap">
<button (click)="search()" class="btn elementeditbutton"
type="submit">Diesen Ort bearbeiten</button>
</div>
</div>
<div class="elementlastedit">Letzte Änderung</div>
</div>
</div>
</div>
......@@ -377,7 +377,7 @@ ol.level3 li:before {
.btn-sm {
height: 20px;
}
.right {
.right, .fa-right {
float:right;
}
.searchreset{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment