-
-
-
-
-
@@ -41,85 +68,155 @@
@@ -129,106 +226,148 @@ export default defineComponent({
.exit-btn {
font-size: 1.2em;
- margin: 0.5em 0;
+ margin: 0.25em 0;
}
-input {
- width: 100%;
- max-width: 250px;
-
- &::placeholder {
- font-size: 0.9em;
- text-align: center;
- }
+.btn {
+ background-color: #444;
}
.card_content {
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ gap: 0.5em;
+
background-color: #1c1c1c;
border-radius: 1em;
- height: 85vh;
+ height: 95vh;
max-width: 1000px;
width: 90vw;
padding: 0 1em;
- overflow-y: auto;
z-index: 100;
- .top-sticky {
- position: sticky;
- top: 0;
- background: #1c1c1c;
+ @media screen and (max-width: $breakpointSm) {
+ height: 80vh;
+ }
+}
+
+.top-pane {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0.5em;
+
+ h1 {
+ color: #aaa;
+ }
+}
+
+.top-sticky {
+ position: sticky;
+ top: 0;
+ background: #1c1c1c;
+}
+
+.filters {
+ display: flex;
+ gap: 0.5em;
+
+ padding: 0.5em 0;
+
+ input {
+ width: 35%;
}
- .header {
- padding-bottom: 1.5em;
- padding-top: 0.5em;
+ @media screen and (max-width: $breakpointSm) {
+ flex-wrap: wrap;
- text-align: center;
- font-size: 1.3em;
-
- h1 {
- line-height: 0.9em;
- margin: 0.5em 0;
-
- div {
- font-size: 0.65em;
- color: #ccc;
- }
+ input {
+ width: 100%;
}
- p {
- margin: 1em 0;
- color: #999;
- font-size: 0.95em;
+ .btn {
+ width: 100%;
}
}
+}
- ul {
+ul {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5em;
+
+ overflow: auto;
+
+ li {
display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 1em;
-
- @media screen and (max-width: 700px) {
- grid-template-columns: repeat(3, 1fr);
- }
-
- @media screen and (max-width: 550px) {
- grid-template-columns: repeat(2, 1fr);
- }
-
- @media screen and (max-width: 400px) {
- grid-template-columns: repeat(1, 1fr);
- }
-
- margin-bottom: 1em;
- }
-
- ul li {
- padding: 0.5em;
-
- cursor: pointer;
-
+ grid-template-columns: 1fr 2fr;
background: #2b2b2b;
+ gap: 1rem;
+ padding: 0.1em;
- img {
- height: 0.85em;
+ &[data-last-selected='true'] .stock-title {
+ border: 1px solid $accentColor;
}
- span {
- color: #999;
- font-weight: bold;
+ .stock-title {
+ cursor: pointer;
+ padding: 0.5em;
+ }
+
+ .stock-icon {
+ height: 0.85em;
}
&:hover {
background: #222;
}
- &:focus {
- outline: 1px solid white;
+ @media screen and (max-width: $breakpointSm) {
+ grid-template-columns: 1fr;
+ // grid-template-rows: 1fr 1fr;
}
}
}
+
+.stock-thumbnails {
+ display: flex;
+ align-items: flex-end;
+
+ width: 100%;
+
+ overflow: auto;
+ padding: 0.5em;
+}
+
+.thumbnail-item {
+ display: flex;
+ align-items: flex-end;
+ justify-content: center;
+ height: 100%;
+
+ div {
+ font-size: 0.9em;
+ text-align: center;
+ }
+
+ img {
+ max-width: 250px;
+ max-height: 50px;
+ }
+
+ & > .thumbnail-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+ }
+}
+
+.bottom {
+ padding: 1em;
+}
diff --git a/src/components/tabs/StockListTab.vue b/src/components/tabs/StockListTab.vue
index f4f42c4..06e14c9 100644
--- a/src/components/tabs/StockListTab.vue
+++ b/src/components/tabs/StockListTab.vue
@@ -94,7 +94,7 @@
+
+
-
+
- - REALNE ZESTAWIENIA - + ZESTAWIENIA REALNE by Railtrains997
-- Pełne informacje o zestawieniach dostępne na stronie - bocznica.eu (stan na - listopad 2021r.) -
+ +
+
+
+
+
+
+
+
+
+
-
+
-
-
+
+- {{ stock.name }} -+ {{ rStock.name }} +
{{ rStock.number }}+{{ stock.number }}++++++{{ stockType }}++
+
+
Ten skład posiada za dużo pojazdów trakcyjnych!
-
@@ -162,7 +162,8 @@ export default defineComponent({
setup() {
const store = useStore();
-
+
+
return {
store,
};
@@ -202,10 +203,6 @@ export default defineComponent({
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
},
- stockImageError(e: Event, stock: IStock): void {
- (e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
- },
-
copyToClipboard() {
// if (this.stockHasWarnings()) {
// alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
diff --git a/src/components/utils/StockThumbnails.vue b/src/components/utils/StockThumbnails.vue
index 90e2935..99d086d 100644
--- a/src/components/utils/StockThumbnails.vue
+++ b/src/components/utils/StockThumbnails.vue
@@ -33,7 +33,7 @@ import { useStore } from '../../store';
import { IStock } from '../../types';
const store = useStore();
-const emit = defineEmits(['listItemClick', 'stockImageError']);
+const emit = defineEmits(['listItemClick']);
const thumbnailsRef = ref() as Ref