Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
T
treinamento-2025.1-frontend
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
RICARDO PRADO FARIA
treinamento-2025.1-frontend
Commits
2390ad19
Commit
2390ad19
authored
2 months ago
by
Amanda Pollyanna da Silva Rodrigues
Browse files
Options
Downloads
Plain Diff
Merge branch 'issue-6/layout' into 'develop'
FIX scroll user route See merge request
!14
parents
386c8c72
e354b92f
Branches
develop
No related tags found
1 merge request
!14
FIX scroll user route
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
src/routes/user/+layout.svelte
+25
-0
25 additions, 0 deletions
src/routes/user/+layout.svelte
src/routes/user/+page.svelte
+74
-113
74 additions, 113 deletions
src/routes/user/+page.svelte
with
99 additions
and
113 deletions
src/routes/user/+layout.svelte
0 → 100644
+
25
−
0
View file @
2390ad19
<script>
</script>
<main>
<slot
/>
</main>
<style>
:global
(
html
,
body
)
{
margin
:
0
;
padding
:
0
;
}
main
{
display
:
flex
;
background-color
:
transparent
;
color
:
white
;
background-image
:
url('/background.png')
;
background-size
:
cover
;
background-position
:
center
;
background-attachment
:
fixed
;
background-repeat
:
no-repeat
;
font-family
:
'Rajdhani'
,
'Courier New'
,
sans-serif
;
}
</style>
This diff is collapsed.
Click to expand it.
src/routes/user/+page.svelte
+
74
−
113
View file @
2390ad19
...
...
@@ -11,22 +11,17 @@
let
currentUser
:
{
name
:
string
;
email
:
string
;
money
:
number
;
cyberpsychosis
:
number
;
cyberLimit
:
number
}
|
null
=
null
;
let
allPurchases
:
UserPurchase
[]
=
[];
let
displayedPurchases
:
UserPurchase
[]
=
[];
let
loading
=
true
;
let
error
=
''
;
let
activeCategory
=
'
all
'
;
let
categories
:
string
[]
=
[];
let
currentUserId
=
-
1
;
let
page
=
1
;
const
perPage
=
10
;
let
currentUserId
=
-
1
function
getToken
():
string
|
null
{
return
localStorage
.
getItem
(
'
token
'
);
}
// Carrega dados ao montar o componente
onMount
(
async
()
=>
{
window
.
addEventListener
(
'
scroll
'
,
handleScroll
);
try
{
const
token
=
getToken
();
if
(
!
token
)
throw
new
Error
(
'
Usuário não autenticado
'
);
...
...
@@ -65,73 +60,43 @@
implant
:
implants
.
find
(
i
=>
i
.
id
===
t
.
implant_id
)
!
}));
// categorias para filtro
categories
=
[...
new
Set
(
allPurchases
.
map
(
p
=>
p
.
implant
.
bodyPart
))];
// página inicial
displayedPurchases
=
allPurchases
.
slice
(
0
,
perPage
);
}
catch
(
err
)
{
error
=
err
instanceof
Error
?
err
.
message
:
String
(
err
);
}
finally
{
loading
=
false
;
}
return
()
=>
window
.
removeEventListener
(
'
scroll
'
,
handleScroll
);
});
// Carrega próxima “página” de items
function
loadMore
()
{
const
start
=
page
*
perPage
;
const
next
=
allPurchases
.
slice
(
start
,
start
+
perPage
);
if
(
next
.
length
>
0
)
{
displayedPurchases
=
[...
displayedPurchases
,
...
next
];
page
+=
1
;
}
}
// Detecta fim da página e dispara loadMore
function
handleScroll
()
{
if
(
window
.
innerHeight
+
window
.
scrollY
>=
document
.
documentElement
.
scrollHeight
-
100
)
{
loadMore
();
}
}
// Categorias únicas (reativo)
$
:
categories
=
[...
new
Set
(
allPurchases
.
map
(
p
=>
p
.
implant
.
bodyPart
))];
// Filtra apenas o que vai ser mostrado
function
getFiltered
()
{
return
activeCategory
===
'
all
'
?
displayedPurchases
:
displayedPurchases
.
filter
(
p
=>
p
.
implant
.
bodyPart
===
activeCategory
);
}
// Lista filtrada (reativo)
$
:
filteredImplants
=
activeCategory
===
'
all
'
?
allPurchases
:
allPurchases
.
filter
(
p
=>
p
.
implant
.
bodyPart
===
activeCategory
);
</script>
<style>
:global
(
body
)
{
margin
:
0
;
padding
:
0
;
color
:
#00f7ff
;
font-family
:
'Rajdhani'
,
'Courier New'
,
sans-serif
;
}
.error
{
color
:
#ff3e3e
;
text-align
:
center
;
}
/* Layout da janela principal */
.window
{
display
:
flex
;
width
:
100vw
;
min-height
:
100vh
;
width
:
100%
;
}
/* Estilização do menu lateral */
.navegation
{
width
:
17%
;
background
:
linear-gradient
(
145deg
,
#1a1a2e
0%
,
#16213e
100%
);
border-right
:
1px
solid
#00f7ff
;
box-shadow
:
2px
0
10px
rgba
(
0
,
247
,
255
,
0.2
);
font-family
:
'Rajdhani'
,
'Courier New'
,
sans-serif
;
width
:
250px
;
padding
:
20px
0
;
display
:
block
;
}
.nav-header
h2
{
...
...
@@ -140,7 +105,7 @@
text-shadow
:
0
0
10px
#ff073a
;
border-bottom
:
1px
solid
#00f7ff
;
padding-bottom
:
15px
;
margin
:
0
15px
20px
;
margin
:
20px
15px
20px
;
}
.nav-section
{
...
...
@@ -178,39 +143,37 @@
cursor
:
pointer
;
text-align
:
left
;
font-family
:
'Rajdhani'
,
'Courier New'
,
sans-serif
;
font-weight
:
800
;
}
.filter-btn
:hover
{
background-color
:
#
9a9f17
;
background-color
:
#
fee801
;
}
.filter-btn.active
{
background-color
:
#9a9f17
;
background-color
:
#fee801
;
border-left
:
3px
solid
#ff073a
;
}
.card-container
{
display
:
flex
;
justify-content
:
center
;
flex-direction
:
row
;
flex-wrap
:
wrap
;
gap
:
10px
;
padding
:
1rem
;
margin
:
0.5rem
;
}
.main-content
{
flex
:
1
;
padding
:
20px
;
overflow-y
:
auto
;
/* Mantém o scroll funcionando */
background-image
:
url('/background.png')
;
padding
:
2rem
;
overflow-y
:
auto
;
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fill
,
minmax
(
250px
,
1
fr
));
margin
:
auto
;
gap
:
0.5rem
;
}
p
{
margin-left
:
10px
;
}
</style>
span
{
color
:
#00d0ff
;
font-family
:
'Rajdhani'
,
'Courier New'
,
sans-serif
;
}
</style>
<div
class=
"window"
>
<div
class=
"navegation"
>
...
...
@@ -226,11 +189,11 @@
<p>
{
#if
currentUser
}
Nome:
{
currentUser
.
name
}
<br>
Email:
{
currentUser
.
email
}
<br>
Money:
{
currentUser
.
money
}
<br>
Cyber
Limit:
{
currentUser
.
cyberLimit
}
<br>
Cyberpsychosis:
{
currentUser
.
cyberpsychosis
}
<br>
<span>
Nome:
</span>
{
currentUser
.
name
}
<br>
<span>
Email:
</span>
{
currentUser
.
email
}
<br>
<span>
Money:
</span>
{
currentUser
.
money
}
<br>
<span>
CyberLimit:
</span>
{
currentUser
.
cyberLimit
}
<br>
<span>
Cyberpsychosis:
</span>
{
currentUser
.
cyberpsychosis
}
<br>
{
:else
if
loading
}
Carregando informações do usuário...
{
:else
if
error
}
...
...
@@ -258,7 +221,7 @@
</div>
<!-- Cards dos Implantes -->
<div
class=
"
main
-cont
ent
"
>
<div
class=
"
card
-cont
ainer
"
>
{
#if
loading
}
<p>
Carregando...
</p>
{
:else
if
error
}
...
...
@@ -266,8 +229,7 @@
{
:else
if
allPurchases
.
length
===
0
}
<p>
Você ainda não possui implantes comprados.
</p>
{
:
else
}
<div
class=
"card-container"
>
{
#each
getFiltered
()
as
p
(
p
.
implant_id
)
}
{
#each
filteredImplants
as
p
(
p
.
implant_id
)
}
<Card
title=
{
p
.
implant
.
name
}
bodyPart=
{
p
.
implant
.
bodyPart
}
...
...
@@ -278,7 +240,6 @@
boughtIds=
{
[]
}
/>
{
/each
}
</div>
{
/if
}
</div>
</div>
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment