@mundogamernetwork/shared-ui 1.17.9 → 1.17.10
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/ui/MgLoginModal.vue +86 -77
- package/package.json +1 -1
|
@@ -40,23 +40,23 @@ function close() {
|
|
|
40
40
|
{{ $t("header.login.btn_register") }}
|
|
41
41
|
</a>
|
|
42
42
|
<Teleport to="body">
|
|
43
|
-
<div v-if="open" class="modal">
|
|
44
|
-
<div class="modal-backdrop" @click="close()"></div>
|
|
45
|
-
<div class="
|
|
46
|
-
<div class="title">
|
|
43
|
+
<div v-if="open" class="mg-login-modal">
|
|
44
|
+
<div class="mg-login-modal-backdrop" @click="close()"></div>
|
|
45
|
+
<div class="mg-login-modal-popup">
|
|
46
|
+
<div class="mg-login-modal-title">
|
|
47
47
|
{{ $t("more.login_modal.title") }}
|
|
48
48
|
</div>
|
|
49
|
-
<div class="subtitle">
|
|
49
|
+
<div class="mg-login-modal-subtitle">
|
|
50
50
|
{{ $t("more.login_modal.subtitle") }}
|
|
51
51
|
</div>
|
|
52
|
-
<div class="buttons">
|
|
53
|
-
<a v-if="props.loginUrl" class="btn1" :href="props.loginUrl">
|
|
52
|
+
<div class="mg-login-modal-buttons">
|
|
53
|
+
<a v-if="props.loginUrl" class="mg-login-modal-btn1" :href="props.loginUrl">
|
|
54
54
|
{{ $t("more.login_modal.btn_login") }}
|
|
55
55
|
</a>
|
|
56
|
-
<a v-if="!signedIn" class="btn1" :href="registerUrl">
|
|
56
|
+
<a v-if="!signedIn" class="mg-login-modal-btn1" :href="registerUrl">
|
|
57
57
|
{{ $t("more.login_modal.btn_1") }}
|
|
58
58
|
</a>
|
|
59
|
-
<a class="btn2" @click="close()">
|
|
59
|
+
<a class="mg-login-modal-btn2" @click="close()">
|
|
60
60
|
{{ $t("more.login_modal.btn_2") }}
|
|
61
61
|
</a>
|
|
62
62
|
</div>
|
|
@@ -67,100 +67,109 @@ function close() {
|
|
|
67
67
|
</template>
|
|
68
68
|
|
|
69
69
|
<style lang="scss">
|
|
70
|
+
// #mgLoginModal only wraps the inline "Register" link below — the modal
|
|
71
|
+
// itself is <Teleport to="body">'d out of this element entirely, so it can
|
|
72
|
+
// never be reached by a `#mgLoginModal .foo` selector. It previously used
|
|
73
|
+
// bare, unscoped names (.modal, .pop-up, .title, .buttons, .btn1/2) that
|
|
74
|
+
// silently collided with Bootstrap's own (and other) same-named classes —
|
|
75
|
+
// Bootstrap's `.modal { display: none; z-index: 1055 }` always won since the
|
|
76
|
+
// teleported node is no longer a descendant of #mgLoginModal, so the intended
|
|
77
|
+
// `#mgLoginModal .modal` override never matched it. Every teleported class is
|
|
78
|
+
// now uniquely prefixed and styled independently of #mgLoginModal.
|
|
70
79
|
#mgLoginModal {
|
|
71
80
|
a {
|
|
72
81
|
cursor: pointer;
|
|
73
82
|
margin-left: 5px;
|
|
74
83
|
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.mg-login-modal {
|
|
87
|
+
position: fixed;
|
|
88
|
+
display: block;
|
|
89
|
+
width: 100%;
|
|
90
|
+
height: 100vh;
|
|
91
|
+
z-index: 99999;
|
|
92
|
+
top: 0;
|
|
93
|
+
left: 0;
|
|
75
94
|
|
|
76
|
-
.modal {
|
|
95
|
+
.mg-login-modal-backdrop {
|
|
77
96
|
position: fixed;
|
|
78
|
-
display: block;
|
|
79
97
|
width: 100%;
|
|
98
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
80
99
|
height: 100vh;
|
|
81
|
-
z-index:
|
|
82
|
-
top: 0;
|
|
100
|
+
z-index: 1;
|
|
83
101
|
left: 0;
|
|
102
|
+
top: 0;
|
|
103
|
+
}
|
|
84
104
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
105
|
+
.mg-login-modal-popup {
|
|
106
|
+
max-height: 90vh;
|
|
107
|
+
width: 320px;
|
|
108
|
+
padding: 24px 32px;
|
|
109
|
+
background-color: var(--sidebar-bg);
|
|
110
|
+
border: 0;
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
gap: 16px;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
align-items: center;
|
|
116
|
+
text-align: center;
|
|
117
|
+
margin: auto;
|
|
118
|
+
margin-top: 15%;
|
|
119
|
+
position: relative;
|
|
120
|
+
z-index: 999;
|
|
121
|
+
|
|
122
|
+
.mg-login-modal-title {
|
|
123
|
+
font-size: 18px;
|
|
124
|
+
font-weight: 600;
|
|
125
|
+
line-height: 26px;
|
|
126
|
+
color: var(--active);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.mg-login-modal-subtitle {
|
|
130
|
+
font-size: 14px;
|
|
131
|
+
font-weight: 400;
|
|
132
|
+
line-height: 20px;
|
|
133
|
+
color: var(--active);
|
|
93
134
|
}
|
|
94
135
|
|
|
95
|
-
.
|
|
96
|
-
max-height: 90vh;
|
|
97
|
-
width: 320px;
|
|
98
|
-
padding: 24px 32px;
|
|
99
|
-
background-color: var(--sidebar-bg);
|
|
100
|
-
border: 0;
|
|
136
|
+
.mg-login-modal-buttons {
|
|
101
137
|
display: flex;
|
|
102
138
|
flex-direction: column;
|
|
103
|
-
gap:
|
|
104
|
-
|
|
105
|
-
align-items: center;
|
|
106
|
-
text-align: center;
|
|
107
|
-
margin: auto;
|
|
108
|
-
margin-top: 15%;
|
|
109
|
-
position: relative;
|
|
110
|
-
z-index: 999;
|
|
111
|
-
|
|
112
|
-
.title {
|
|
113
|
-
font-size: 18px;
|
|
114
|
-
font-weight: 600;
|
|
115
|
-
line-height: 26px;
|
|
116
|
-
color: var(--active);
|
|
117
|
-
}
|
|
139
|
+
gap: 8px;
|
|
140
|
+
width: 100%;
|
|
118
141
|
|
|
119
|
-
.
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
142
|
+
.mg-login-modal-btn1 {
|
|
143
|
+
display: flex;
|
|
144
|
+
width: 100%;
|
|
145
|
+
height: 44px;
|
|
146
|
+
padding: 0 12px;
|
|
147
|
+
justify-content: center;
|
|
148
|
+
align-items: center;
|
|
149
|
+
font-size: 16px;
|
|
123
150
|
color: var(--active);
|
|
151
|
+
background-color: var(--sidebar-bg);
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
border: 1px solid var(--chip-text);
|
|
124
154
|
}
|
|
125
155
|
|
|
126
|
-
.
|
|
156
|
+
.mg-login-modal-btn2 {
|
|
127
157
|
display: flex;
|
|
128
|
-
flex-direction: column;
|
|
129
|
-
gap: 8px;
|
|
130
158
|
width: 100%;
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
font-size: 16px;
|
|
140
|
-
color: var(--active);
|
|
141
|
-
background-color: var(--sidebar-bg);
|
|
142
|
-
cursor: pointer;
|
|
143
|
-
border: 1px solid var(--chip-text);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.btn2 {
|
|
147
|
-
display: flex;
|
|
148
|
-
width: 100%;
|
|
149
|
-
height: 44px;
|
|
150
|
-
padding: 0 12px;
|
|
151
|
-
justify-content: center;
|
|
152
|
-
align-items: center;
|
|
153
|
-
border: 0;
|
|
154
|
-
color: var(--chip-text);
|
|
155
|
-
cursor: pointer;
|
|
156
|
-
background-color: var(--search-bar-bg);
|
|
157
|
-
}
|
|
159
|
+
height: 44px;
|
|
160
|
+
padding: 0 12px;
|
|
161
|
+
justify-content: center;
|
|
162
|
+
align-items: center;
|
|
163
|
+
border: 0;
|
|
164
|
+
color: var(--chip-text);
|
|
165
|
+
cursor: pointer;
|
|
166
|
+
background-color: var(--search-bar-bg);
|
|
158
167
|
}
|
|
159
168
|
}
|
|
160
169
|
}
|
|
161
170
|
|
|
162
171
|
@media screen and (max-width: 768px) {
|
|
163
|
-
.modal
|
|
172
|
+
.mg-login-modal-popup {
|
|
164
173
|
width: 100%;
|
|
165
174
|
margin-top: 50%;
|
|
166
175
|
}
|