diff --git a/README.md b/README.md index cb6a215..2cb8667 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,12 @@ # Country Boys – Prosjekt 2 +Repository for team IT2810-H26-T20 in IT2810-H26. +Link to project: http://it2810-20.idi.ntnu.no/project2/ + > En søkbar katalog over byer med filtre, sortering, anmeldelser og lokale bokmerker. > Utviklet i emnet IT2810 Webutvikling ved NTNU. + ![React](https://img.shields.io/badge/React-20232A?logo=react&logoColor=61DAFB) ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white) ![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=white) diff --git a/t20-project-2/src/App.tsx b/t20-project-2/src/App.tsx index ca18298..ef77766 100644 --- a/t20-project-2/src/App.tsx +++ b/t20-project-2/src/App.tsx @@ -168,7 +168,6 @@ function App() { const [loading, setLoading] = useState(true) const [loadingMore, setLoadingMore] = useState(false) const [error, setError] = useState('') - const [apiConnected, setApiConnected] = useState(false) const [refreshKey, setRefreshKey] = useState(0) const [savedCities, setSavedCities] = useState(readSavedCities) const [activeView, setActiveView] = useState<'home' | 'saved'>('home') @@ -197,12 +196,10 @@ function App() { setCities(searchCities.items) setTotalCount(searchCities.totalCount) setHasMore(searchCities.hasMore) - setApiConnected(true) setError('') }) .catch((requestError: Error) => { if (requestError.name !== 'AbortError') { - setApiConnected(false) setError(requestError.message) } }) @@ -309,19 +306,16 @@ function App() { Saved{savedCities.length > 0 && {savedCities.length}} - - {apiConnected ? 'Live database' : error ? 'Database unavailable' : 'Connecting…'} -
-

CONNECTED TO THE CITY DATABASE

+

EXPLORE CITIES AROUND THE WORLD

Find the city that
speaks to you.

Search real city data, explore details, and leave a review.

-
Lisbon, Portugal
+
Lisbon, Portugal
{ @@ -397,7 +391,6 @@ function App() { -
) diff --git a/t20-project-2/src/index.css b/t20-project-2/src/index.css index 2eaf9ff..0b9e896 100644 --- a/t20-project-2/src/index.css +++ b/t20-project-2/src/index.css @@ -52,22 +52,17 @@ button, a, input, select { -webkit-tap-highlight-color: transparent; } .login-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border: 1px solid #dce4df; border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s, background-color .2s; } .login-link:hover { border-color: #a7bdb1; background: #f8faf8; } .login-icon, .login-icon svg { display: block; width: 18px; height: 18px; } -.api-status { display: inline-flex; align-items: center; gap: 8px; color: #52615a; font-size: 11px; font-weight: 600; } -.api-status span { width: 7px; height: 7px; border-radius: 50%; background: #4d9a6e; box-shadow: 0 0 0 3px #e1efe5; } -.api-status-offline span { background: #c07a42; box-shadow: 0 0 0 3px #f7e9dc; } .page-shell { width: min(1184px, calc(100% - 64px)); margin: 0 auto; } .intro { position: relative; min-height: 230px; margin-top: 34px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; } .intro-copy { position: relative; z-index: 1; padding: 15px 0 19px; } .eyebrow, .results-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: 1.45px; } -.eyebrow-dot, .caption-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5a151; } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 10px; color: var(--ink); font: 700 42px/1.15 var(--serif); letter-spacing: 0; } h1 span { color: var(--green); } .intro-description { margin: 0; color: #697671; font-size: 14px; } .intro-image { position: absolute; top: 0; right: 0; width: 45%; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #f5f7f4 0%, rgba(245,247,244,.08) 37%, rgba(22,44,36,.03) 100%), url('https://images.unsplash.com/photo-1555881400-74d7acaacd8b?auto=format&fit=crop&w=1100&q=82') center 48% / cover; } .image-caption { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; color: white; background: rgba(23,43,36,.74); border: 1px solid rgba(255,255,255,.26); border-radius: 4px; font-size: 10px; font-weight: 600; } -.caption-dot { background: #f6bd76; } .search-form { position: relative; z-index: 2; display: flex; gap: 10px; max-width: 785px; margin: 0 0 42px; padding: 8px; background: white; border: 1px solid #e2e9e3; border-radius: 7px; box-shadow: 0 8px 22px rgba(38,67,53,.06); } .search-field { min-width: 0; min-height: 44px; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 11px; } @@ -187,8 +182,6 @@ h1 span { color: var(--green); } .land-two { top: 21%; left: 37%; width: 16%; height: 30%; border-radius: 42% 58% 35% 65%; transform: rotate(9deg); clip-path: polygon(9% 12%,44% 0,71% 15%,100% 44%,73% 72%,62% 100%,39% 84%,22% 64%,0 46%); } .land-three { top: 22%; right: 8%; width: 38%; height: 48%; border-radius: 50% 47% 35% 55% / 36% 40% 59% 51%; transform: rotate(7deg); clip-path: polygon(5% 18%,30% 7%,52% 0,83% 12%,100% 31%,88% 57%,65% 49%,58% 81%,39% 100%,23% 79%,18% 52%,0 42%); } .land-four { bottom: 3%; left: 45%; width: 16%; height: 31%; border-radius: 44% 50% 59% 43%; transform: rotate(-14deg); clip-path: polygon(15% 0,74% 9%,100% 38%,76% 66%,64% 100%,42% 80%,33% 52%,0 33%); } -.map-pin { position: absolute; z-index: 1; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #df9251; box-shadow: 0 1px 5px rgba(39,69,49,.28); } -.pin-one { top: 39%; left: 27%; }.pin-two { top: 31%; left: 48%; }.pin-three { top: 45%; left: 55%; }.pin-four { top: 37%; right: 22%; }.pin-five { bottom: 22%; left: 49%; } .site-footer { min-height: 83px; display: flex; align-items: center; gap: 17px; margin-top: 25px; border-top: 1px solid var(--line); } .footer-brand { font-size: 16px; } .site-footer p { margin: 0; color: #87928b; font-size: 10px; } @@ -216,7 +209,6 @@ h1 span { color: var(--green); } .nav-link { font-size: 11px; } .login-link { width: 34px; height: 34px; justify-content: center; padding: 0; font-size: 0; } .login-icon, .login-icon svg { width: 19px; height: 19px; } - .api-status { font-size: 0; } .page-shell { width: calc(100% - 36px); } .intro { min-height: 246px; align-items: end; margin-top: 18px; } .intro-copy { padding: 0 0 22px; }