tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Styling fixes.

pull/556/head
Sebastian 5 years ago
parent
244b68d639
commit
48843d72bc
8 changed files with 102 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      frontend/app/app.module.ts
  2. 180
      frontend/app/features/apps/pages/apps-page.component.html
  3. 5
      frontend/app/features/apps/pages/apps-page.component.scss
  4. 2
      frontend/app/shared/components/assets/asset-uploader.component.html
  5. 2
      frontend/app/shell/pages/internal/apps-menu.component.html
  6. 2
      frontend/app/shell/pages/internal/internal-area.component.html
  7. 2
      frontend/app/shell/pages/internal/notifications-menu.component.html
  8. 2
      frontend/app/shell/pages/internal/profile-menu.component.html

2
frontend/app/app.module.ts
View File

@ -57,7 +57,7 @@ export function configTranslations() {
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
return new LocalizerService(window['texts']); return new LocalizerService(window['texts']);
} else { } else {
return new LocalizerService(require('./../backend/i18n/frontend_en.json')).logMissingKeys(); return new LocalizerService(require('./../../backend/i18n/frontend_en.json')).logMissingKeys();
} }
} }

180
frontend/app/features/apps/pages/apps-page.component.html
View File

@ -1,135 +1,137 @@
<sqx-title message="i18n:apps.listPageTitle"></sqx-title> <sqx-title message="i18n:apps.listPageTitle"></sqx-title>
<div class="apps-section"> <div class="panel-container page">
<h1 class="apps-title">{{ 'apps.welcomeTitle' | sqxTranslate: { user: authState.user?.displayName } }}</h1> <div class="apps-section">
<h1 class="apps-title">{{ 'apps.welcomeTitle' | sqxTranslate: { user: authState.user?.displayName } }}</h1>
<div class="subtext"> <div class="subtext">
{{ 'apps.welcomeSubtitle' | sqxTranslate }} {{ 'apps.welcomeSubtitle' | sqxTranslate }}
</div>
</div> </div>
</div>
<ng-container *ngIf="appsState.apps | async; let apps"> <ng-container *ngIf="appsState.apps | async; let apps">
<div class="apps-section"> <div class="apps-section">
<div class="empty" *ngIf="apps.length === 0"> <div class="empty" *ngIf="apps.length === 0">
<h3 class="empty-headline">{{ 'apps.empty' | sqxTranslate }}</h3> <h3 class="empty-headline">{{ 'apps.empty' | sqxTranslate }}</h3>
</div> </div>
<div class="card card-href card-app" *ngFor="let app of apps; trackBy: trackByApp" [routerLink]="['/app', app.name]"> <div class="card card-href card-app" *ngFor="let app of apps; trackBy: trackByApp" [routerLink]="['/app', app.name]">
<div class="card-body"> <div class="card-body">
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col-auto card-left"> <div class="col-auto card-left">
<sqx-avatar [image]="app.image" [identifier]="app.name"></sqx-avatar> <sqx-avatar [image]="app.image" [identifier]="app.name"></sqx-avatar>
</div>
<div class="col card-right">
<h3 class="card-title">{{app.displayName}}</h3>
<div class="card-text card-links">
<a [routerLink]="['/app', app.name]" sqxStopClick>{{ 'common.edit' | sqxTranslate }}</a>
<span class="deeplinks">
&nbsp;|
<a [routerLink]="['/app', app.name, 'content']" sqxStopClick>{{ 'common.content' | sqxTranslate }}</a> &middot;
<a [routerLink]="['/app', app.name, 'assets']" sqxStopClick>{{ 'common.assets' | sqxTranslate }}</a> &middot;
<a [routerLink]="['/app', app.name, 'settings']" sqxStopClick>{{ 'common.settings' | sqxTranslate }}</a>
</span>
</div> </div>
<div class="col card-right">
<div class="card-text" *ngIf="app.description"> <h3 class="card-title">{{app.displayName}}</h3>
{{app.description}}
<div class="card-text card-links">
<a [routerLink]="['/app', app.name]" sqxStopClick>{{ 'common.edit' | sqxTranslate }}</a>
<span class="deeplinks">
&nbsp;|
<a [routerLink]="['/app', app.name, 'content']" sqxStopClick>{{ 'common.content' | sqxTranslate }}</a> &middot;
<a [routerLink]="['/app', app.name, 'assets']" sqxStopClick>{{ 'common.assets' | sqxTranslate }}</a> &middot;
<a [routerLink]="['/app', app.name, 'settings']" sqxStopClick>{{ 'common.settings' | sqxTranslate }}</a>
</span>
</div>
<div class="card-text" *ngIf="app.description">
{{app.description}}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </ng-container>
</ng-container>
<div class="apps-section" *ngIf="(uiState.settings | async).canCreateApps"> <div class="apps-section" *ngIf="(uiState.settings | async).canCreateApps">
<div class="card card-template card-href" (click)="createNewApp('')"> <div class="card card-template card-href" (click)="createNewApp('')">
<div class="card-body"> <div class="card-body">
<div class="card-image"> <div class="card-image">
<img src="./images/add-app.svg"> <img src="./images/add-app.svg">
</div> </div>
<h3 class="card-title">{{ 'apps.createBlankApp' | sqxTranslate }}</h3> <h3 class="card-title">{{ 'apps.createBlankApp' | sqxTranslate }}</h3>
<div class="card-text"> <div class="card-text">
{{ 'apps.createBlankAppDescription' | sqxTranslate }} {{ 'apps.createBlankAppDescription' | sqxTranslate }}
</div>
</div> </div>
</div> </div>
</div>
<div class="card card-template card-href" (click)="createNewApp('Blog')"> <div class="card card-template card-href" (click)="createNewApp('Blog')">
<div class="card-body"> <div class="card-body">
<div class="card-image"> <div class="card-image">
<img src="./images/add-blog.svg"> <img src="./images/add-blog.svg">
</div> </div>
<h3 class="card-title">{{ 'apps.createBlogApp' | sqxTranslate }}</h3> <h3 class="card-title">{{ 'apps.createBlogApp' | sqxTranslate }}</h3>
<div class="card-text"> <div class="card-text">
<div>{{ 'apps.createBlogAppDescription' | sqxTranslate }}</div> <div>{{ 'apps.createBlogAppDescription' | sqxTranslate }}</div>
<div> <div>
{{ 'common.sampleCodeLabel' | sqxTranslate }} <a href="https://github.com/Squidex/squidex-samples" sqxStopClick sqxExternalLink>{{ 'common.github' | sqxTranslate }}</a> {{ 'common.sampleCodeLabel' | sqxTranslate }} <a href="https://github.com/Squidex/squidex-samples" sqxStopClick sqxExternalLink>{{ 'common.github' | sqxTranslate }}</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card card-template card-href" (click)="createNewApp('Identity')"> <div class="card card-template card-href" (click)="createNewApp('Identity')">
<div class="card-body"> <div class="card-body">
<div class="card-image"> <div class="card-image">
<img src="./images/add-identity.svg"> <img src="./images/add-identity.svg">
</div> </div>
<h3 class="card-title">{{ 'apps.createIdentityApp' | sqxTranslate }}</h3> <h3 class="card-title">{{ 'apps.createIdentityApp' | sqxTranslate }}</h3>
<div class="card-text"> <div class="card-text">
<div>{{ 'apps.createIdentityAppDescription' | sqxTranslate }}</div> <div>{{ 'apps.createIdentityAppDescription' | sqxTranslate }}</div>
<div> <div>
<a href="https://github.com/Squidex/squidex-identity" sqxStopClick sqxExternalLink>{{ 'common.project' | sqxTranslate }}</a> <a href="https://github.com/Squidex/squidex-identity" sqxStopClick sqxExternalLink>{{ 'common.project' | sqxTranslate }}</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card card-template card-href" (click)="createNewApp('IdentityV2')"> <div class="card card-template card-href" (click)="createNewApp('IdentityV2')">
<div class="card-body"> <div class="card-body">
<div class="card-image"> <div class="card-image">
<img src="./images/add-identity.svg"> <img src="./images/add-identity.svg">
</div> </div>
<h3 class="card-title">{{ 'apps.createIdentityAppV2' | sqxTranslate }}</h3> <h3 class="card-title">{{ 'apps.createIdentityAppV2' | sqxTranslate }}</h3>
<div class="card-text"> <div class="card-text">
<div>{{ 'apps.createIdentityAppV2Description' | sqxTranslate }}</div> <div>{{ 'apps.createIdentityAppV2Description' | sqxTranslate }}</div>
<div> <div>
<a href="https://github.com/Squidex/squidex-identity" sqxStopClick sqxExternalLink>{{ 'common.project' | sqxTranslate }}</a> <a href="https://github.com/Squidex/squidex-identity" sqxStopClick sqxExternalLink>{{ 'common.project' | sqxTranslate }}</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card card-template card-href" (click)="createNewApp('Profile')"> <div class="card card-template card-href" (click)="createNewApp('Profile')">
<div class="card-body"> <div class="card-body">
<div class="card-image"> <div class="card-image">
<img src="./images/add-profile.svg"> <img src="./images/add-profile.svg">
</div> </div>
<h3 class="card-title">{{ 'apps.createProfileApp' | sqxTranslate }}</h3> <h3 class="card-title">{{ 'apps.createProfileApp' | sqxTranslate }}</h3>
<div class="card-text"> <div class="card-text">
<div>{{ 'apps.createProfileAppDescription' | sqxTranslate }}</div> <div>{{ 'apps.createProfileAppDescription' | sqxTranslate }}</div>
<div> <div>
{{ 'common.sampleCodeLabel' | sqxTranslate }} <a href="https://github.com/Squidex/squidex-samples" sqxStopClick sqxExternalLink>{{ 'common.github' | sqxTranslate }}</a> {{ 'common.sampleCodeLabel' | sqxTranslate }} <a href="https://github.com/Squidex/squidex-samples" sqxStopClick sqxExternalLink>{{ 'common.github' | sqxTranslate }}</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div *ngIf="info" class="apps-section"> <div *ngIf="info" class="apps-section">
<small class="info">{{info}}</small> <small class="info">{{info}}</small>
</div>
</div> </div>
<ng-container *sqxModal="addAppDialog"> <ng-container *sqxModal="addAppDialog">

5
frontend/app/features/apps/pages/apps-page.component.scss
View File

@ -9,6 +9,11 @@
} }
} }
.page {
overflow-x: hidden;
overflow-y: auto;
}
.card { .card {
& { & {
@include hover-visible('.deeplinks', inline-block); @include hover-visible('.deeplinks', inline-block);

2
frontend/app/shared/components/assets/asset-uploader.component.html
View File

@ -1,6 +1,6 @@
<ng-container *ngIf="appsState.selectedAppOrNull | async; let app"> <ng-container *ngIf="appsState.selectedAppOrNull | async; let app">
<ng-container *ngIf="app.canUploadAssets"> <ng-container *ngIf="app.canUploadAssets">
<ul class="nav navbar-nav" *ngIf="assetUploader.uploads | async; let uploads" (sqxDropFile)="addFiles($event)"> <ul class="nav navbar-nav align-items-center" *ngIf="assetUploader.uploads | async; let uploads" (sqxDropFile)="addFiles($event)">
<li class="nav-item nav-icon dropdown"> <li class="nav-item nav-icon dropdown">
<span class="nav-link dropdown-toggle" (click)="modalMenu.toggle()"> <span class="nav-link dropdown-toggle" (click)="modalMenu.toggle()">
<i class="icon-upload-3"></i> <i class="icon-upload-3"></i>

2
frontend/app/shell/pages/internal/apps-menu.component.html
View File

@ -1,4 +1,4 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav align-items-center">
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<span class="nav-link dropdown-toggle" id="app-name" (click)="appsMenu.toggle()" #button> <span class="nav-link dropdown-toggle" id="app-name" (click)="appsMenu.toggle()" #button>
<ng-container *ngIf="appsState.selectedAppOrNull | async; let app; else noApp"> <ng-container *ngIf="appsState.selectedAppOrNull | async; let app; else noApp">

2
frontend/app/shell/pages/internal/internal-area.component.html
View File

@ -7,7 +7,7 @@
<sqx-apps-menu></sqx-apps-menu> <sqx-apps-menu></sqx-apps-menu>
</div> </div>
<div class="navbar-nav ml-auto"> <div class="navbar-nav align-items-center ml-auto">
<sqx-search-menu></sqx-search-menu> <sqx-search-menu></sqx-search-menu>
<sqx-asset-uploader></sqx-asset-uploader> <sqx-asset-uploader></sqx-asset-uploader>

2
frontend/app/shell/pages/internal/notifications-menu.component.html
View File

@ -1,3 +1,3 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav align-items-center">
<sqx-notifo></sqx-notifo> <sqx-notifo></sqx-notifo>
</ul> </ul>

2
frontend/app/shell/pages/internal/profile-menu.component.html
View File

@ -1,4 +1,4 @@
<ul class="nav navbar-nav"> <ul class="nav navbar-nav align-items-center">
<li class="nav-item nav-icon nav-item-help"> <li class="nav-item nav-icon nav-item-help">
<a class="nav-link" href="https://squidex.io/help" sqxExternalLink="noicon"> <a class="nav-link" href="https://squidex.io/help" sqxExternalLink="noicon">
<i class="icon-help2"></i> <i class="icon-help2"></i>

Write Preview
Loading…
Cancel
Save