badar_madeena/app/views/institutions/show.html.erb

122 lines
3.7 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="container-fluid min-vh-100 p-4 gradient-bg">
<% if notice %>
<div class="alert alert-success"><%= notice %></div>
<% end %>
<!-- Institution Header Card -->
<div class="card institution-card shadow mb-4 p-4">
<h1 class="institution-name mb-3 text-primary"><%= @institution.name %></h1>
<div class="btn-group">
<%= link_to "Edit Institution", edit_institution_path(@institution), class: "btn btn-secondary me-2" %>
<%= link_to "Back to Institutions", institutions_path, class: "btn btn-outline-light me-2" %>
<%= button_to "Destroy Institution", @institution, method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger" %>
<%= link_to " New Student", new_institution_student_path(@institution), class: "btn btn-primary ms-2" %>
</div>
</div>
<!-- Students Section -->
<h2 class="mb-3 text-white">Students</h2>
<% if @students.present? && @students.any? %>
<div class="row g-4">
<% @students.each do |student| %>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">
<div class="student-card shadow p-3">
<h4 class="student-name"><%= student.first_name %> <%= student.last_name %></h4>
<p class="student-info"><strong>Place:</strong> <%= student.place %></p>
<p class="student-info">
<strong>Institution:</strong>
<% if student.institution.present? %>
<%= link_to student.institution.name, institution_path(student.institution), class: "badge badge-primary" %>
<% else %>
<span class="badge badge-secondary">No institution</span>
<% end %>
</p>
<% view_path = @institution.present? ? institution_student_path(@institution, student) :
(student.institution.present? ? institution_student_path(student.institution, student) : student_path(student)) %>
<%= link_to "View →", view_path, class: "btn-small" %>
</div>
</div>
<% end %>
</div>
<% else %>
<p class="text-center text-white mt-4">No students found.</p>
<% end %>
</div>
<!-- Styles -->
<style>
/* Background Gradient Animation */
.gradient-bg {
background: linear-gradient(-45deg, #1e88e5, #43a047, #6a1b9a, #d81b60);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
min-height: 100vh;
padding-bottom: 40px;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Institution Card */
.institution-card {
background-color: rgba(24, 26, 27, 0.95);
color: #e0e0e0;
border-radius: 12px;
}
/* Buttons */
.btn-primary {
background: #2563eb;
color: #fff;
font-weight: 600;
transition: 0.2s ease;
}
.btn-primary:hover { background: #1e4fc4; transform: translateY(-2px); }
.btn-secondary, .btn-outline-light, .btn-danger {
transition: 0.2s ease;
}
/* Student Cards */
.student-card {
background-color: #181a1b;
color: #e0e0e0;
border-radius: 10px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 180px;
}
.student-name { font-weight: 600; font-size: 1.1rem; margin-bottom: 6px; }
.student-info { font-size: 0.9rem; margin: 2px 0; color: #a0a0a0; }
.btn-small {
background: #10b981;
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-weight: 600;
text-align: center;
transition: 0.2s ease;
margin-top: 8px;
}
.btn-small:hover { background: #0a8d63; }
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 999px;
font-size: 0.8rem;
text-decoration: none;
margin-top: 2px;
}
.badge-primary { background: #2563eb; }
.badge-secondary { background: #6b7280; }
</style>