samller buttons

DonCorleone · Apr 12, 2021 · ddaa85d · ddaa85d
1 parent b0ccca7
commit ddaa85d
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 15 deletions.
diff --git a/src/app/components/gigs/gigs-item/gigs-item.component.html b/src/app/components/gigs/gigs-item/gigs-item.component.html
@@ -30,10 +30,10 @@ <h3 (click)="openInfo()" class="gig-title info-link">{{ eventInfoDe.name }}</h3>
 		<!--//info-content-->
 		<div class="gig-actions">
 			<a (click)="collapse.toggle()" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"
-				 class="btn btn-xs btn-ghost-secondary">Info</a>
+				 class="btn btn-sm btn-ghost-secondary">Info</a>
 
 			<span>
-        <a *ngIf="showBuyButton" [href]="[eventLink]" class="btn btn-xs btn-secondary" target="_blank">Tickets</a>
+        <a *ngIf="showBuyButton" [href]="[eventLink]" class="btn btn-sm btn-secondary" target="_blank">Tickets</a>
       </span>
 			<span *ngIf="showIsGone" class="secondary-content">
         Vorstellung vorüber.

diff --git a/src/app/components/info/info-item/info-item.component.html b/src/app/components/info/info-item/info-item.component.html
@@ -3,7 +3,7 @@
 			<div class="shortDesc">{{ shortDesc }}</div>
 	</div>
 	<div class="modal-item-footer" *ngIf="facebookPixelId">
-		<a (click)="openGallery()" class="btn btn-xs btn-ghost-secondary">Impressionen</a>
+		<a (click)="openGallery()" class="btn btn-sm btn-ghost-secondary">Impressionen</a>
 	</div>
 </div>
 

diff --git a/src/app/components/merch/merch-detail/merch-detail.component.html b/src/app/components/merch/merch-detail/merch-detail.component.html
@@ -20,6 +20,6 @@ <h3>{{ eventName }}</h3>
 			Betreff: Buchungsanfrage '{{ eventName }}'</p>
 	</div>
 	<div class="modal-item-footer">
-		<a (click)="openInfo()" class="btn btn-xs btn-ghost-secondary">Infos zum Stück</a>
+		<a (click)="openInfo()" class="btn btn-sm btn-ghost-secondary">Infos zum Stück</a>
 	</div>
 </div>
diff --git a/src/app/components/merch/merch-item/merch-item.component.html b/src/app/components/merch/merch-item/merch-item.component.html
@@ -4,7 +4,7 @@
     <span class="mask-inner">
       <span class="item-title">{{ name }}</span>
       <span class="desc">Dieses Stück kann gebucht werden!</span>
-      <span class="btn btn-xs btn-primary">Buchen</span>
+      <span class="btn btn-sm btn-primary">Buchen</span>
     </span>
 	</a>
 </div>

diff --git a/src/app/components/music/music-detail/music-detail.component.html b/src/app/components/music/music-detail/music-detail.component.html
@@ -27,6 +27,6 @@ <h3>{{ eventName }}</h3>
 		<p>Zusätzliche Angaben in der Mail: Anzahl CDs, Name und Adresse</p>
 	</div>
 	<div class="modal-item-footer">
-		<a (click)="openInfo()" class="btn btn-xs btn-ghost-secondary">Infos zum Stück</a>
+		<a (click)="openInfo()" class="btn btn-sm btn-ghost-secondary">Infos zum Stück</a>
 	</div>
 </div>
diff --git a/src/app/components/update/update-slide/update-slide.component.html b/src/app/components/update/update-slide/update-slide.component.html
@@ -19,9 +19,9 @@ <h3 class="title" (click)="openInfo()">{{name}}</h3>
 			<p class="intro">
 				{{ shortDescription }}
 			</p>
-			<a class="btn btn-xs btn-ghost-primary" (click)="openInfo()">Info</a>
-			<a class="btn btn-xs btn-primary" (click)="openGallery()" *ngIf="eventDetail.facebookPixelId">Impressionen</a>
-			<a class="btn btn-xs btn-secondary" (click)="scrollTo('gigs')" *ngIf="futureEvent">Tickets</a>
+			<a class="btn btn-sm btn-ghost-primary" (click)="openInfo()">Info</a>
+			<a class="btn btn-sm btn-primary" (click)="openGallery()" *ngIf="eventDetail.facebookPixelId">Impressionen</a>
+			<a class="btn btn-sm btn-secondary" (click)="scrollTo('gigs')" *ngIf="futureEvent">Tickets</a>
 			<!--//intro-->
 		</div>
 		<!--//desc-->

diff --git a/src/app/components/update/update-slide/update-slide.component.scss b/src/app/components/update/update-slide/update-slide.component.scss
@@ -99,6 +99,14 @@ img {
 	}
 }
 
+// Small devices (portrait phones, less than 768px)
+@media (max-width: 325px) {
+	.btn {
+		width: 100%;
+		margin-bottom: 10px;
+	}
+}
+
 // Small devices (landscape phones, less than 768px)
 @media (max-width: 767.98px) {
 	:host-context(.updates-block) {
@@ -128,11 +136,6 @@ img {
 	.update-list .list-item {
 		height: inherit;
 	}
-
-	.btn {
-		width: 100%;
-		margin-bottom: 10px;
-	}
 }
 
 // Large devices (desktops, 992px and up)
@@ -158,6 +161,6 @@ img {
 	display: flex;
 }
 
-.btn-xs {
+.btn-sm {
 	margin-right: 20px;
 }