@mundogamernetwork/shared-ui 1.1.37 → 1.1.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/magazine/MagazineFlipBookSkelectonLoading.vue +7 -0
- package/components/magazine/MagazineInsideSkelectonLoading.vue +155 -0
- package/components/magazine/MagazinePreviewSkelectonLoading.vue +245 -0
- package/components/magazine/MagazineSkelectonLoading.vue +152 -0
- package/components/magazine/MagazineSlugSkelectonLoading.vue +256 -0
- package/package.json +1 -1
- package/pages/magazine/[slug]/index.vue +615 -0
- package/pages/magazine/[slug]/preview.vue +920 -0
- package/pages/magazine/index.vue +1036 -152
- package/stores/magazine.ts +83 -0
- package/types/magazine.ts +103 -0
- package/utils/magazineHotspots.ts +62 -0
- package/pages/magazine/[slug].vue +0 -209
|
@@ -0,0 +1,615 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from "vue";
|
|
3
|
+
import { useRoute, useRouter } from "vue-router";
|
|
4
|
+
|
|
5
|
+
useSeoMeta({
|
|
6
|
+
title: "MGN Magazine",
|
|
7
|
+
description:
|
|
8
|
+
"Discover, be inspired and connect in the magazine that breathes digital gaming. Welcome to your new source of gamer passion!",
|
|
9
|
+
ogTitle: "MGN Magazine",
|
|
10
|
+
ogDescription:
|
|
11
|
+
"Discover, be inspired and connect in the magazine that breathes digital gaming. Welcome to your new source of gamer passion!",
|
|
12
|
+
ogImage: "/imgs/seo-magazine-image.jpg",
|
|
13
|
+
ogUrl: "/magazine",
|
|
14
|
+
twitterTitle: "MGN Magazine",
|
|
15
|
+
twitterDescription:
|
|
16
|
+
"Discover, be inspired and connect in the magazine that breathes digital gaming. Welcome to your new source of gamer passion!",
|
|
17
|
+
twitterImage: "/imgs/seo-magazine-image.jpg",
|
|
18
|
+
twitterCard: "summary",
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
const route = useRoute();
|
|
22
|
+
const router = useRouter();
|
|
23
|
+
const locale = useNuxtApp().$i18n.locale;
|
|
24
|
+
const slug = computed(() => route.params.slug as string);
|
|
25
|
+
|
|
26
|
+
const magazineStore = useMagazineStore();
|
|
27
|
+
const { magazine, magazines } = magazineStore;
|
|
28
|
+
const institutionalStore = useInstitutionalStore();
|
|
29
|
+
const { language } = institutionalStore;
|
|
30
|
+
|
|
31
|
+
const authStore = useAuthStore();
|
|
32
|
+
const { user, signedIn } = storeToRefs(authStore);
|
|
33
|
+
|
|
34
|
+
watchEffect(() => {
|
|
35
|
+
if (magazine.status !== 'success' || !magazine.data?.name) return;
|
|
36
|
+
|
|
37
|
+
const desc = magazine.data.short_description?.substring(0, 155) + '...' || '';
|
|
38
|
+
|
|
39
|
+
useSeoMeta({
|
|
40
|
+
title: `${magazine.data.name} | Mundo Gamer Network`,
|
|
41
|
+
description: desc,
|
|
42
|
+
ogTitle: magazine.data.name,
|
|
43
|
+
ogDescription: desc,
|
|
44
|
+
ogImage: magazine.data.cover_url_src || 'https://mundogamer.network/imgs/seo-magazine-image.jpg',
|
|
45
|
+
ogType: 'article',
|
|
46
|
+
twitterTitle: magazine.data.name,
|
|
47
|
+
twitterDescription: desc,
|
|
48
|
+
twitterImage: magazine.data.cover_url_src || 'https://mundogamer.network/imgs/seo-magazine-image.jpg',
|
|
49
|
+
twitterCard: 'summary_large_image',
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
let isModalOpen = ref(false);
|
|
54
|
+
let status = ref("init");
|
|
55
|
+
|
|
56
|
+
interface MagazineItem {
|
|
57
|
+
id: string;
|
|
58
|
+
edition_number: number;
|
|
59
|
+
language: {
|
|
60
|
+
id: string;
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
interface LanguageItem {
|
|
65
|
+
id: string;
|
|
66
|
+
localized_name: string;
|
|
67
|
+
magazine_slug: string;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const languages: Ref<LanguageItem[]> = ref([]);
|
|
71
|
+
const languageId = ref("");
|
|
72
|
+
|
|
73
|
+
const {
|
|
74
|
+
public: { apiBaseURL },
|
|
75
|
+
} = useRuntimeConfig();
|
|
76
|
+
|
|
77
|
+
function formatDate(dateString: string): string {
|
|
78
|
+
const date = new Date(dateString);
|
|
79
|
+
const monthNames = [
|
|
80
|
+
"January",
|
|
81
|
+
"February",
|
|
82
|
+
"March",
|
|
83
|
+
"April",
|
|
84
|
+
"May",
|
|
85
|
+
"June",
|
|
86
|
+
"July",
|
|
87
|
+
"August",
|
|
88
|
+
"September",
|
|
89
|
+
"October",
|
|
90
|
+
"November",
|
|
91
|
+
"December",
|
|
92
|
+
];
|
|
93
|
+
const month = monthNames[date.getMonth()];
|
|
94
|
+
const year = date.getFullYear().toString().slice(-2);
|
|
95
|
+
return `${month} ${year}`;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
async function getMagazine() {
|
|
99
|
+
try {
|
|
100
|
+
await magazineStore.getMagazine(slug.value);
|
|
101
|
+
|
|
102
|
+
status.value = magazine.status;
|
|
103
|
+
languageId.value = magazine.data.language.id;
|
|
104
|
+
} catch (error) {
|
|
105
|
+
console.error("Error fetching magazine:", error);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
async function fetchMagazine() {
|
|
109
|
+
try {
|
|
110
|
+
await magazineStore.fetchMagazine({
|
|
111
|
+
filter: {
|
|
112
|
+
status: 1,
|
|
113
|
+
edition_number: magazine.data.edition_number,
|
|
114
|
+
platform_id: import.meta.env.VITE_SYSTEM_ID,
|
|
115
|
+
},
|
|
116
|
+
sort: "id",
|
|
117
|
+
order: "desc",
|
|
118
|
+
per_page: "all",
|
|
119
|
+
page: 1,
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
filterLanguages();
|
|
123
|
+
} catch (error) {
|
|
124
|
+
console.error("Error fetching magazine:", error);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
async function fetchLanguage() {
|
|
129
|
+
try {
|
|
130
|
+
await institutionalStore.fetchLanguage({});
|
|
131
|
+
} catch (error) {
|
|
132
|
+
console.error("Error fetching languages:", error);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
function filterLanguages() {
|
|
137
|
+
if (magazine.data && magazines.data && magazines.data.length > 0) {
|
|
138
|
+
languageId.value = magazine.data.language.id;
|
|
139
|
+
const languageIds = magazines.data.map(
|
|
140
|
+
(item: MagazineItem) => item.language.id,
|
|
141
|
+
);
|
|
142
|
+
languages.value = language.data.filter((language: LanguageItem) =>
|
|
143
|
+
languageIds.includes(language.id),
|
|
144
|
+
);
|
|
145
|
+
languages.value.forEach((language: LanguageItem) => {
|
|
146
|
+
const magazineItem = magazines.data.find(
|
|
147
|
+
(item: MagazineItem) => item.language.id === language.id,
|
|
148
|
+
);
|
|
149
|
+
if (magazineItem) {
|
|
150
|
+
language.magazine_slug = magazineItem.slug;
|
|
151
|
+
}
|
|
152
|
+
});
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
const handleChangeLanguage = () => {
|
|
157
|
+
const selectedLanguage = languages.value.find(
|
|
158
|
+
(lang: LanguageItem) => lang.id === languageId.value,
|
|
159
|
+
);
|
|
160
|
+
|
|
161
|
+
if (selectedLanguage) {
|
|
162
|
+
const magazineSlug = selectedLanguage.magazine_slug;
|
|
163
|
+
router.push(`/${locale.value}/magazine/${magazineSlug}`);
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
function downloadPdf() {
|
|
168
|
+
if (magazine.data.pdf_url_src) {
|
|
169
|
+
window.open(magazine.data.pdf_url_src, "_blank");
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
const runtimeConfig = useRuntimeConfig();
|
|
174
|
+
const accountsRegisterUrl = computed(() => {
|
|
175
|
+
if (process.client) {
|
|
176
|
+
const base_url = runtimeConfig.public.accountsBaseUrl;
|
|
177
|
+
const current = window.location.href;
|
|
178
|
+
|
|
179
|
+
return `${base_url}/login?redirect_to=${encodeURIComponent(current)}`;
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
|
|
183
|
+
async function loadMagazineData() {
|
|
184
|
+
status.value = "init";
|
|
185
|
+
await fetchLanguage();
|
|
186
|
+
await getMagazine();
|
|
187
|
+
await fetchMagazine();
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
watch(slug, () => {
|
|
191
|
+
loadMagazineData();
|
|
192
|
+
}, { immediate: true });
|
|
193
|
+
</script>
|
|
194
|
+
|
|
195
|
+
<template>
|
|
196
|
+
<div class="container magazine-inside">
|
|
197
|
+
<section v-if="!magazine.data || status !== 'success'">
|
|
198
|
+
<MagazineSlugSkelectonLoading />
|
|
199
|
+
</section>
|
|
200
|
+
<section v-else>
|
|
201
|
+
<div>
|
|
202
|
+
<div class="container">
|
|
203
|
+
<h1>{{ magazine.data.name }}</h1>
|
|
204
|
+
<div class="sub-infos">
|
|
205
|
+
<div class="edition">
|
|
206
|
+
{{ $t("more.magazine.edition") }} #{{
|
|
207
|
+
magazine.data.edition_number
|
|
208
|
+
}}
|
|
209
|
+
</div>
|
|
210
|
+
<div class="data">
|
|
211
|
+
{{ formatDate(magazine.data.release_date) }}
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div
|
|
215
|
+
class="image-content"
|
|
216
|
+
:style="
|
|
217
|
+
'background: radial-gradient(53.67% 53.67% at 50% 50%, ' +
|
|
218
|
+
magazine.data.color +
|
|
219
|
+
' 8.37%, rgba(0, 0, 0, 0.00) 100%);'
|
|
220
|
+
"
|
|
221
|
+
>
|
|
222
|
+
<div v-if="magazine.data.premium === true" class="premium-card">
|
|
223
|
+
<div class="premium">
|
|
224
|
+
<svg
|
|
225
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
226
|
+
width="56"
|
|
227
|
+
height="57"
|
|
228
|
+
viewBox="0 0 56 57"
|
|
229
|
+
fill="none"
|
|
230
|
+
>
|
|
231
|
+
<path
|
|
232
|
+
d="M38.3134 42.0983H16.8934V44.7116H38.3134V42.0983Z"
|
|
233
|
+
fill="var(--text-magazine)"
|
|
234
|
+
/>
|
|
235
|
+
<path
|
|
236
|
+
d="M35.7 26.0449L27.6034 12.0449L19.5067 26.0216L9.33337 23.4549L15.0967 39.4849H40.0634L46.6667 23.6183L35.7 26.0449Z"
|
|
237
|
+
fill="var(--text-magazine)"
|
|
238
|
+
/>
|
|
239
|
+
</svg>
|
|
240
|
+
{{ $t("more.magazine.text_6") }}
|
|
241
|
+
</div>
|
|
242
|
+
<img
|
|
243
|
+
:src="magazine.data.cover_url_src || '/imgs/no-cover-img.jpg'"
|
|
244
|
+
/>
|
|
245
|
+
</div>
|
|
246
|
+
<img
|
|
247
|
+
v-if="magazine.data.premium === false"
|
|
248
|
+
:src="magazine.data.cover_url_src || '/imgs/no-cover-img.jpg'"
|
|
249
|
+
/>
|
|
250
|
+
<div class="actions d-flex">
|
|
251
|
+
<select
|
|
252
|
+
v-model="languageId"
|
|
253
|
+
class="select"
|
|
254
|
+
@change="handleChangeLanguage"
|
|
255
|
+
>
|
|
256
|
+
<option :key="'none'" :value="'none'">
|
|
257
|
+
{{ $t("more.magazine.text_3") }}
|
|
258
|
+
</option>
|
|
259
|
+
<option
|
|
260
|
+
v-for="lang in languages"
|
|
261
|
+
:key="lang.id"
|
|
262
|
+
:value="lang.id"
|
|
263
|
+
>
|
|
264
|
+
{{ lang.localized_name }}
|
|
265
|
+
</option>
|
|
266
|
+
</select>
|
|
267
|
+
<div v-if="magazine.data && magazine.data.flipbook_code">
|
|
268
|
+
<NuxtLink
|
|
269
|
+
:to="`/${locale}/magazine/${magazine.data.slug}/preview`"
|
|
270
|
+
>
|
|
271
|
+
<button class="btn secondary">
|
|
272
|
+
{{ $t("more.magazine.btn_3") }}
|
|
273
|
+
</button>
|
|
274
|
+
</NuxtLink>
|
|
275
|
+
</div>
|
|
276
|
+
<div v-else>
|
|
277
|
+
<MagazineModal
|
|
278
|
+
:isModalOpen="isModalOpen"
|
|
279
|
+
:magazine="magazine.data"
|
|
280
|
+
@update:isModalOpen="isModalOpen = $event"
|
|
281
|
+
/>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="description">
|
|
286
|
+
{{ magazine.data.short_description }}
|
|
287
|
+
</div>
|
|
288
|
+
<br />
|
|
289
|
+
<div class="description" v-html="magazine.data.description"></div>
|
|
290
|
+
<div class="condition">
|
|
291
|
+
<div
|
|
292
|
+
v-if="magazine.data.public === false && signedIn === false"
|
|
293
|
+
class="signin"
|
|
294
|
+
>
|
|
295
|
+
{{ $t("more.magazine.text_2") }}
|
|
296
|
+
<ClientOnly>
|
|
297
|
+
<a class="btn primary" :href="accountsRegisterUrl">
|
|
298
|
+
{{ $t("more.magazine.btn_4") }}
|
|
299
|
+
</a>
|
|
300
|
+
</ClientOnly>
|
|
301
|
+
</div>
|
|
302
|
+
<div v-else-if="magazine.data.premium === true" class="signin">
|
|
303
|
+
{{ $t("more.magazine.text_4") }}
|
|
304
|
+
<button class="btn primary">
|
|
305
|
+
{{ $t("more.magazine.btn_5") }}
|
|
306
|
+
</button>
|
|
307
|
+
</div>
|
|
308
|
+
<div v-else class="download">
|
|
309
|
+
<button
|
|
310
|
+
class="btn primary"
|
|
311
|
+
:disabled="!magazine.data.pdf_url"
|
|
312
|
+
@click="downloadPdf"
|
|
313
|
+
>
|
|
314
|
+
{{ $t("more.magazine.btn_2") }}
|
|
315
|
+
</button>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
<NewsletterFullWidthComponent />
|
|
319
|
+
<MagazinesList />
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</section>
|
|
323
|
+
<DiscordEmbedComponent class="mt-5" />
|
|
324
|
+
</div>
|
|
325
|
+
</template>
|
|
326
|
+
|
|
327
|
+
<style lang="scss" scoped>
|
|
328
|
+
.magazine-inside {
|
|
329
|
+
h1 {
|
|
330
|
+
font-family: Roboto;
|
|
331
|
+
font-size: 32px;
|
|
332
|
+
font-style: normal;
|
|
333
|
+
font-weight: 900;
|
|
334
|
+
line-height: 40px;
|
|
335
|
+
color: var(--text-magazine);
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.sub-infos {
|
|
339
|
+
display: flex;
|
|
340
|
+
align-items: center;
|
|
341
|
+
gap: 24px;
|
|
342
|
+
align-self: stretch;
|
|
343
|
+
margin-top: 24px;
|
|
344
|
+
|
|
345
|
+
.edition {
|
|
346
|
+
color: var(--text-magazine);
|
|
347
|
+
font-family: Roboto;
|
|
348
|
+
font-size: 14px;
|
|
349
|
+
font-style: normal;
|
|
350
|
+
font-weight: 400;
|
|
351
|
+
line-height: 20px;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.data {
|
|
355
|
+
font-family: Roboto;
|
|
356
|
+
font-size: 14px;
|
|
357
|
+
font-style: normal;
|
|
358
|
+
font-weight: 400;
|
|
359
|
+
line-height: 20px;
|
|
360
|
+
color: var(--text-magazine);
|
|
361
|
+
text-transform: uppercase;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.image-content {
|
|
366
|
+
margin-top: 40px;
|
|
367
|
+
margin-bottom: 40px;
|
|
368
|
+
display: flex;
|
|
369
|
+
padding: 16px 0px;
|
|
370
|
+
flex-direction: column;
|
|
371
|
+
justify-content: center;
|
|
372
|
+
align-items: center;
|
|
373
|
+
gap: 24px;
|
|
374
|
+
align-self: stretch;
|
|
375
|
+
|
|
376
|
+
.premium-card {
|
|
377
|
+
position: relative;
|
|
378
|
+
|
|
379
|
+
.premium {
|
|
380
|
+
display: flex;
|
|
381
|
+
width: 534px;
|
|
382
|
+
height: 692.757px;
|
|
383
|
+
padding: 16px;
|
|
384
|
+
flex-direction: column;
|
|
385
|
+
justify-content: center;
|
|
386
|
+
align-items: center;
|
|
387
|
+
flex-shrink: 0;
|
|
388
|
+
background: rgba(19, 22, 28, 0.5);
|
|
389
|
+
backdrop-filter: blur(2px);
|
|
390
|
+
position: absolute;
|
|
391
|
+
color: var(--text-magazine);
|
|
392
|
+
text-align: center;
|
|
393
|
+
font-family: Roboto;
|
|
394
|
+
font-size: 18px;
|
|
395
|
+
font-style: normal;
|
|
396
|
+
font-weight: 600;
|
|
397
|
+
line-height: 26px;
|
|
398
|
+
|
|
399
|
+
img {
|
|
400
|
+
width: 100%;
|
|
401
|
+
height: auto;
|
|
402
|
+
position: relative;
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
img {
|
|
408
|
+
width: 534px;
|
|
409
|
+
height: 695px;
|
|
410
|
+
flex-shrink: 0;
|
|
411
|
+
box-shadow: -7px 1px 12.8px 0px rgba(0, 0, 0, 0.15);
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.description {
|
|
416
|
+
font-family: Roboto;
|
|
417
|
+
font-size: 16px;
|
|
418
|
+
font-style: normal;
|
|
419
|
+
font-weight: 400;
|
|
420
|
+
color: var(--text-magazine);
|
|
421
|
+
line-height: 24px;
|
|
422
|
+
word-break: break-all;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.condition {
|
|
426
|
+
width: 100%;
|
|
427
|
+
text-align: -webkit-center;
|
|
428
|
+
|
|
429
|
+
.signin {
|
|
430
|
+
display: flex;
|
|
431
|
+
padding: 8px 16px;
|
|
432
|
+
flex-direction: column;
|
|
433
|
+
align-items: center;
|
|
434
|
+
gap: 16px;
|
|
435
|
+
align-self: stretch;
|
|
436
|
+
max-width: 618px;
|
|
437
|
+
width: 100%;
|
|
438
|
+
margin-top: 24px;
|
|
439
|
+
background-color: var(--news-card-bg);
|
|
440
|
+
color: var(--text-magazine);
|
|
441
|
+
font-family: Roboto;
|
|
442
|
+
font-size: 14px;
|
|
443
|
+
font-style: normal;
|
|
444
|
+
font-weight: 400;
|
|
445
|
+
line-height: 20px;
|
|
446
|
+
|
|
447
|
+
.btn {
|
|
448
|
+
display: flex;
|
|
449
|
+
width: 220px;
|
|
450
|
+
height: 44px;
|
|
451
|
+
padding: 0px 12px;
|
|
452
|
+
justify-content: center;
|
|
453
|
+
font-family: Roboto;
|
|
454
|
+
font-size: 16px;
|
|
455
|
+
font-style: normal;
|
|
456
|
+
font-weight: 400;
|
|
457
|
+
line-height: 24px;
|
|
458
|
+
align-items: center;
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.download {
|
|
463
|
+
margin-top: 24px;
|
|
464
|
+
width: 100%;
|
|
465
|
+
display: flex;
|
|
466
|
+
gap: 24px;
|
|
467
|
+
justify-content: flex-end;
|
|
468
|
+
|
|
469
|
+
.select {
|
|
470
|
+
border-style: solid;
|
|
471
|
+
background: transparent;
|
|
472
|
+
border-width: 0px 0px 1px 0px;
|
|
473
|
+
padding: 12px 12px;
|
|
474
|
+
display: flex;
|
|
475
|
+
max-width: 224px;
|
|
476
|
+
flex-direction: row;
|
|
477
|
+
align-items: center;
|
|
478
|
+
justify-content: flex-start;
|
|
479
|
+
align-self: stretch;
|
|
480
|
+
flex-shrink: 0;
|
|
481
|
+
margin-right: 16px;
|
|
482
|
+
color: var(--darkcommunity-content-text-inactive, #aaaaaa);
|
|
483
|
+
text-align: left;
|
|
484
|
+
font: var(--body-1, 400 16px/24px "Roboto", sans-serif);
|
|
485
|
+
position: relative;
|
|
486
|
+
flex: 1;
|
|
487
|
+
transition: 0.15s ease-in-out;
|
|
488
|
+
|
|
489
|
+
&:last-child {
|
|
490
|
+
margin-right: 0px;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
&:focus,
|
|
494
|
+
&:focus-visible,
|
|
495
|
+
&:active {
|
|
496
|
+
transition: 0.15s ease-in-out;
|
|
497
|
+
border: 2px solid var(--search-bar-active-border-color);
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
option {
|
|
501
|
+
background: var(--search-bar-bg);
|
|
502
|
+
padding: 0px 16px;
|
|
503
|
+
gap: 16px;
|
|
504
|
+
align-items: center;
|
|
505
|
+
justify-content: flex-start;
|
|
506
|
+
height: 48px !important;
|
|
507
|
+
position: relative;
|
|
508
|
+
color: var(--active) !important;
|
|
509
|
+
text-align: left;
|
|
510
|
+
font: var(--body-1, 400 16px/24px "Roboto", sans-serif) !important;
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.btn {
|
|
515
|
+
display: flex;
|
|
516
|
+
width: 220px;
|
|
517
|
+
height: 44px;
|
|
518
|
+
padding: 0px 12px;
|
|
519
|
+
justify-content: center;
|
|
520
|
+
font-family: Roboto;
|
|
521
|
+
font-size: 16px;
|
|
522
|
+
font-style: normal;
|
|
523
|
+
font-weight: 400;
|
|
524
|
+
line-height: 24px;
|
|
525
|
+
align-items: center;
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
.actions {
|
|
531
|
+
.select {
|
|
532
|
+
border-style: solid;
|
|
533
|
+
background: transparent;
|
|
534
|
+
border-width: 0px 0px 1px 0px;
|
|
535
|
+
padding: 5px 12px;
|
|
536
|
+
display: flex;
|
|
537
|
+
flex-direction: row;
|
|
538
|
+
max-width: 224px;
|
|
539
|
+
align-items: center;
|
|
540
|
+
justify-content: flex-start;
|
|
541
|
+
align-self: stretch;
|
|
542
|
+
flex-shrink: 0;
|
|
543
|
+
margin-right: 16px;
|
|
544
|
+
color: var(--darkcommunity-content-text-inactive, #aaaaaa);
|
|
545
|
+
text-align: left;
|
|
546
|
+
font: var(--body-1, 400 16px/24px "Roboto", sans-serif);
|
|
547
|
+
position: relative;
|
|
548
|
+
flex: 1;
|
|
549
|
+
transition: 0.15s ease-in-out;
|
|
550
|
+
|
|
551
|
+
&:last-child {
|
|
552
|
+
margin-right: 0px;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
&:focus,
|
|
556
|
+
&:focus-visible,
|
|
557
|
+
&:active {
|
|
558
|
+
transition: 0.15s ease-in-out;
|
|
559
|
+
border: 2px solid var(--search-bar-active-border-color);
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
option {
|
|
563
|
+
background: var(--search-bar-bg);
|
|
564
|
+
padding: 0px 16px;
|
|
565
|
+
gap: 16px;
|
|
566
|
+
align-items: center;
|
|
567
|
+
justify-content: flex-start;
|
|
568
|
+
height: 48px !important;
|
|
569
|
+
position: relative;
|
|
570
|
+
color: var(--active) !important;
|
|
571
|
+
text-align: left;
|
|
572
|
+
font: var(--body-1, 400 16px/24px "Roboto", sans-serif) !important;
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
@media screen and (max-width: 767px) {
|
|
579
|
+
.magazine-inside {
|
|
580
|
+
.image-content {
|
|
581
|
+
margin-bottom: 2rem;
|
|
582
|
+
|
|
583
|
+
img {
|
|
584
|
+
width: 300px;
|
|
585
|
+
height: 400px;
|
|
586
|
+
flex-shrink: 0;
|
|
587
|
+
box-shadow: -7px 1px 12.8px 0px rgba(0, 0, 0, 0.15);
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.premium-card {
|
|
591
|
+
.premium {
|
|
592
|
+
width: 300px;
|
|
593
|
+
height: 400px;
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
.actions {
|
|
598
|
+
flex-direction: row;
|
|
599
|
+
gap: 1rem;
|
|
600
|
+
}
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
@media screen and (min-width: 0px) and (max-width: 460px) {
|
|
604
|
+
.actions {
|
|
605
|
+
flex-direction: column !important;
|
|
606
|
+
gap: 1rem;
|
|
607
|
+
}
|
|
608
|
+
.download {
|
|
609
|
+
flex-direction: column;
|
|
610
|
+
gap: 1rem;
|
|
611
|
+
justify-content: center !important;
|
|
612
|
+
align-items: center;
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
</style>
|