Skip to content

Commit

Permalink
fixed home page styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@spencer-sliffe
spencer-sliffe committed Dec 8, 2024
1 parent b0cf778 commit 9647548
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 123 deletions.
4 changes: 2 additions & 2 deletions Backend/kobrastocks/services.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -709,8 +709,8 @@ def get_crypto_data(crypto_id):
# Extract relevant fields
crypto_data = {
"id": crypto_id,
"ticker": data.get("ticker"),
"name": data.get("name"),
"ticker": data.get("symbol", "").upper() if data.get("symbol") else "N/A",
"name": data.get("name", "N/A"),
"price": data.get("market_data", {}).get("current_price", {}).get("usd"),
"market_cap": data.get("market_data", {}).get("market_cap", {}).get("usd"),
"percentage_change_24h": data.get("market_data", {}).get("price_change_percentage_24h"),
Expand Down
192 changes: 89 additions & 103 deletions client/src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -734,109 +734,6 @@ footer a:hover {
opacity: 1;
}

/* Stock/Crypto Card Styles */
.stock-card,
.crypto-card {
background-color: #ffffff;
border-radius: var(--border-radius);
width: 200px;
padding: var(--spacing-lg);
cursor: pointer;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
display: flex;
flex-direction: column;
align-items: stretch;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stock-card:hover,
.crypto-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.stock-card-header,
.crypto-card-header {
display: flex;
align-items: center;
margin-bottom: var(--spacing-md);
}

.stock-card-icon,
.crypto-card-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: bold;
font-size: 1.5rem;
margin-right: var(--spacing-md);
overflow: hidden;
}

.stock-card-body,
.crypto-card-body {
display: flex;
justify-content: space-between;
align-items: center;
}

.stock-card-info h3,
.crypto-card-info h3 {
margin: 0;
font-size: 1.5rem;
color: var(--color-text);
}

.company-name,
.crypto-name {
margin: 0;
font-size: 1rem;
color: var(--color-text-secondary);
}

.stock-price,
.crypto-price {
font-size: 1.25rem;
font-weight: bold;
color: var(--color-text);
}

.stock-change,
.crypto-change {
font-size: 1rem;
font-weight: 500;
}

.stock-change.positive,
.crypto-change.positive {
color: var(--color-success);
}

.stock-change.negative,
.crypto-change.negative {
color: var(--color-danger);
}

/* Responsive Adjustments for Cards */
@media (max-width: 1024px) {
.stock-card,
.crypto-card {
width: 220px;
}
}

@media (max-width: 768px) {
.stock-card,
.crypto-card {
width: 100%;
}
}

/* Drawers */
.slide-enter-active,
.slide-leave-active {
Expand Down Expand Up @@ -1186,6 +1083,95 @@ footer a:hover {
}
}

.stock-card,
.crypto-card {
background-color: #ffffff;
border-radius: var(--border-radius);
width: 200px; /* consistent width for both card types */
padding: var(--spacing-lg);
cursor: pointer;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
display: flex;
flex-direction: column;
align-items: stretch;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stock-card:hover,
.crypto-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.stock-card-header,
.crypto-card-header {
display: flex;
align-items: center;
margin-bottom: var(--spacing-md);
}

.stock-card-icon,
.crypto-card-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: bold;
font-size: 1.5rem;
margin-right: var(--spacing-md);
overflow: hidden;
padding-right: 14px;
padding-left: 14px;
}

.stock-card-body,
.crypto-card-body {
display: flex;
justify-content: space-between;
align-items: center;
}

.stock-card-info h3,
.crypto-card-info h3 {
margin: 0;
font-size: 1.5rem;
color: var(--color-text);
}

.company-name,
.crypto-name {
margin: 0;
font-size: 1rem;
color: var(--color-text-secondary);
}

.stock-price,
.crypto-price {
font-size: 1.25rem;
font-weight: bold;
color: var(--color-text);
}

.stock-change,
.crypto-change {
font-size: 1rem;
font-weight: 500;
}

.stock-change.positive,
.crypto-change.positive {
color: var(--color-success);
}

.stock-change.negative,
.crypto-change.negative {
color: var(--color-danger);
}

/* Dark Mode (Optional)
body.dark-mode {
--color-background: #1f2937;
Expand Down
61 changes: 43 additions & 18 deletions client/src/views/HomePage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,7 @@ Displays the main page for KobraStocks, including search functionality, favorite
class="stock-change"
:class="{ positive: stock.percentage_change >= 0, negative: stock.percentage_change < 0 }"
>
<span v-if="stock.percentage_change !== undefined">{{
stock.percentage_change.toFixed(2)
}}%</span><span v-else>N/A</span>
<span v-if="stock.percentage_change !== undefined">{{ stock.percentage_change.toFixed(2) }}%</span><span v-else>N/A</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -134,7 +132,7 @@ Displays the main page for KobraStocks, including search functionality, favorite
>
<div class="crypto-card" @click="openCryptoDrawer(crypto.crypto_id)">
<div class="crypto-card-header">
<div class="crypto-card-icon">
<div class="crypto-card-icon">
<img :src="crypto.logoUrl" alt="Logo" v-if="crypto.logoUrl"/>
<div v-else class="crypto-initial">{{ crypto.ticker.charAt(0) }}</div>
</div>
Expand All @@ -151,9 +149,7 @@ Displays the main page for KobraStocks, including search functionality, favorite
class="crypto-change"
:class="{ positive: crypto.percentage_change_24h >= 0, negative: crypto.percentage_change_24h < 0 }"
>
<span v-if="crypto.percentage_change_24h !== undefined">{{
crypto.percentage_change_24h.toFixed(2)
}}%</span><span v-else>N/A</span>
<span v-if="crypto.percentage_change_24h !== undefined">{{ crypto.percentage_change_24h.toFixed(2) }}%</span><span v-else>N/A</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -219,9 +215,7 @@ Displays the main page for KobraStocks, including search functionality, favorite
class="stock-change"
:class="{ positive: stock.percentage_change >= 0, negative: stock.percentage_change < 0 }"
>
<span v-if="stock.percentage_change !== undefined">{{
stock.percentage_change.toFixed(2)
}}%</span><span v-else>N/A</span>
<span v-if="stock.percentage_change !== undefined">{{ stock.percentage_change.toFixed(2) }}%</span><span v-else>N/A</span>
</div>
</div>
</div>
Expand All @@ -245,6 +239,23 @@ Displays the main page for KobraStocks, including search functionality, favorite
:touch-drag="true"
class="stock-carousel"
>
<template #addons>
<button
@click="prev('hotCryptosCarousel')"
class="carousel-nav-button prev-button"
aria-label="Previous"
>
<i class="fas fa-chevron-left"></i>
</button>
<button
@click="next('hotCryptosCarousel')"
class="carousel-nav-button next-button"
aria-label="Next"
>
<i class="fas fa-chevron-right"></i>
</button>
</template>

<slide
v-for="crypto in hotCryptos"
:key="crypto.crypto_id"
Expand Down Expand Up @@ -293,6 +304,24 @@ Displays the main page for KobraStocks, including search functionality, favorite
:touch-drag="true"
class="stock-carousel"
>
<!-- Add navigation buttons here as well -->
<template #addons>
<button
@click="prev('watchlistCarousel')"
class="carousel-nav-button prev-button"
aria-label="Previous"
>
<i class="fas fa-chevron-left"></i>
</button>
<button
@click="next('watchlistCarousel')"
class="carousel-nav-button next-button"
aria-label="Next"
>
<i class="fas fa-chevron-right"></i>
</button>
</template>

<slide
v-for="stock in watchlistStocksData"
:key="stock.ticker"
Expand All @@ -317,9 +346,7 @@ Displays the main page for KobraStocks, including search functionality, favorite
class="stock-change"
:class="{ positive: stock.percentage_change >= 0, negative: stock.percentage_change < 0 }"
>
<span v-if="stock.percentage_change !== undefined">{{
stock.percentage_change.toFixed(2)
}}%</span><span v-else>N/A</span>
<span v-if="stock.percentage_change !== undefined">{{ stock.percentage_change.toFixed(2) }}%</span><span v-else>N/A</span>
</div>
</div>
</div>
Expand All @@ -330,6 +357,8 @@ Displays the main page for KobraStocks, including search functionality, favorite
<p class="center">You have no stocks in your watchlist.</p>
</div>
</section>

<!-- Watchlist Cryptos Carousel -->
<section class="watchlist-cryptos">
<h2 class="center">Your Cryptocurrency Watchlist</h2>
<div v-if="watchlistCryptosData && watchlistCryptosData.length > 0">
Expand Down Expand Up @@ -382,9 +411,7 @@ Displays the main page for KobraStocks, including search functionality, favorite
class="crypto-change"
:class="{ positive: crypto.percentage_change_24h >= 0, negative: crypto.percentage_change_24h < 0 }"
>
<span v-if="crypto.percentage_change_24h !== undefined">{{
crypto.percentage_change_24h.toFixed(2)
}}%</span><span v-else>N/A</span>
<span v-if="crypto.percentage_change_24h !== undefined">{{ crypto.percentage_change_24h.toFixed(2) }}%</span><span v-else>N/A</span>
</div>
</div>
</div>
Expand Down Expand Up @@ -423,7 +450,6 @@ Displays the main page for KobraStocks, including search functionality, favorite
</div>
</template>


<script>
import axios from 'axios';
import {Carousel, Slide} from 'vue3-carousel';
Expand Down Expand Up @@ -653,4 +679,3 @@ export default {
},
};
</script>

0 comments on commit 9647548

Please sign in to comment.