Change the snip layout to make it less cluttered

This commit is contained in:
Tim 2025-05-24 00:02:23 +02:00
parent 797d7a2e8f
commit 5fcc32de6d
6 changed files with 111 additions and 76 deletions

View File

@ -167,6 +167,6 @@ class SnipController extends AbstractController
$this->addFlash('success', sprintf('Snip "%s" unarchived', $snip));
}
return $this->redirectToRoute('snip_single', ['snip' => $snip->getId()]);
return $this->redirectToRoute('snip_edit', ['snip' => $snip->getId()]);
}
}

View File

@ -0,0 +1,74 @@
{% extends 'base/one.column.html.twig' %}
{% block body %}
{% if app.user and app.user is same as(snip.createdBy) %}
<a href="{{ path('snip_index') }}" class="btn btn-primary">
<i class="fa fa-arrow-left"></i> Index
</a>
{% else %}
<a href="{{ path('snip_public') }}" class="btn btn-primary">
<i class="fa fa-arrow-left"></i> Index
</a>
{% endif %}
{% block buttons %}{% endblock %}
<br><br>
<div class="card" style="width: 100%;">
<div class="card-header d-flex justify-content-between">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link {% if active == 'single' %}active{% endif %}"
href="{{ path('snip_single', {'snip': snip.id}) }}">View</a>
</li>
{% if is_granted('edit', snip) %}
<li class="nav-item">
<a class="nav-link {% if active == 'edit' %}active{% endif %}"
href="{{ path('snip_edit', {'snip': snip.id}) }}">Edit</a>
</li>
<li class="nav-item">
<a class="nav-link {% if active == 'versions' %}active{% endif %}"
href="{{ path('version_index', {'snip': snip.id}) }}">Versions</a>
</li>
{% endif %}
</ul>
<span>
<span class="badge bg-secondary">
<i class="fa fa-hashtag"></i> {{ snip.id }}
</span>
{% for tag in snip.tags %}
<span class="badge bg-secondary">{{ tag }}</span>
{% endfor %}
{{ include('user/badge.html.twig', {user: snip.createdBy}) }}
{{ include('snip/badge.html.twig', {snip: snip}) }}
</span>
</div>
<div class="card-body">
{% block cardbody %}{% endblock %}
</div>
<div class="card-footer">
<p class="card-text text-muted">
Current version: {{ snip.activeVersion.id }}
{% if snip.activeVersion == snip.latestVersion %}(latest){% endif %}
Created at {{ include('generic/datetime.badge.html.twig', {datetime: snip.activeVersion.id.dateTime}) }}
</p>
</div>
</div>
{% endblock %}
{% block css %}
{{ parent() }}
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
{% endblock %}
{% block js %}
{{ parent() }}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
const codeBlocks = document.querySelectorAll('code.hljs');
codeBlocks.forEach((block) => {
hljs.highlightElement(block);
});
</script>
{% endblock %}

View File

@ -1,21 +1,27 @@
{% extends 'base/one.column.html.twig' %}
{% extends 'snip/base.html.twig' %}
{% if snip.id %}
{% set title = 'Edit Snip ' ~ snip %}
{% set title %}{{ snip }} - Edit{% endset %}
{% else %}
{% set title = 'Create Snip' %}
{% endif %}
{% set active = 'edit' %}
{% block body %}
{% if snip.id %}
<a href="{{ path('snip_single', {snip: snip.id}) }}" class="btn btn-primary">
<i class="fa fa-arrow-left"></i>
Back
{% block buttons %}
{% if is_granted('edit', snip) %}
<a href="{{ path('snip_archive', {snip: snip.id}) }}" class="btn btn-secondary">
{% if snip.archived %}
<i class="fa fa-undo"></i> Unarchive
{% else %}
<i class="fa fa-archive"></i> Archive
{% endif %}
</a>
<a href="{{ path('snip_delete', {snip: snip.id}) }}" class="btn btn-danger">
<i class="fa fa-trash"></i> Delete
</a>
{% endif %}
<a href="{{ path('snip_index') }}" class="btn btn-info">
<i class="fa fa-list"></i>
Index
</a><br><br>
{% endblock %}
{% block cardbody %}
{{ form(form) }}
{% endblock %}

View File

@ -1,63 +1,16 @@
{% extends 'base/one.column.html.twig' %}
{% extends 'snip/base.html.twig' %}
{% set title %}Snip {{ snip }}{% endset %}
{% set title %}{{ snip }} - View{% endset %}
{% set active = 'single' %}
{% block body %}
{% if app.user %}
<a href="{{ path('snip_index') }}" class="btn btn-primary">
<i class="fa fa-arrow-left"></i> Back
</a>
{% else %}
<a href="{{ path('snip_public') }}" class="btn btn-primary">
<i class="fa fa-arrow-left"></i> Index
</a>
{% endif %}
{% if is_granted('edit', snip) %}
<a class="btn btn-info" href="{{ path('version_index', {snip: snip.id}) }}">
<i class="fa fa-history" aria-hidden="true"></i> Versions
</a>
<a class="btn btn-warning" href="{{ path('snip_edit', {snip: snip.id}) }}">
<i class="fa fa-pencil" aria-hidden="true"></i> Edit
</a>
<a href="{{ path('snip_archive', {snip: snip.id}) }}" class="btn btn-secondary">
{% if snip.archived %}
<i class="fa fa-undo"></i> Unarchive
{% else %}
<i class="fa fa-archive"></i> Archive
{% endif %}
</a>
<a href="{{ path('snip_delete', {snip: snip.id}) }}" class="btn btn-danger">
<i class="fa fa-trash"></i> Delete
</a>
{% endif %}
<a href="{{ path('snip_raw', {snip: snip.id}) }}" class="btn btn-primary">
{% block buttons %}
<a href="{{ path('snip_raw', {snip: snip.id}) }}" class="btn btn-info">
<i class="fa fa-eye"></i> Raw
</a>
<br><br>
<div class="card" style="width: 100%;">
<h4 class="card-header d-flex justify-content-between">
<span>
{{ snip }} <small class="text-muted">#{{ snip.id }}</small>
</span>
<span>
{% for tag in snip.tags %}
<span class="badge bg-secondary">{{ tag }}</span>
{% endfor %}
{{ include('user/badge.html.twig', {user: snip.createdBy}) }}
{{ include('snip/badge.html.twig', {snip: snip}) }}
</span>
</h4>
<div class="card-body">
{% endblock %}
{% block cardbody %}
{{ content|raw }}
</div>
<div class="card-footer">
<p class="card-text text-muted">
Current version: {{ snip.activeVersion.id }}
{% if snip.activeVersion == snip.latestVersion %}(latest){% endif %}
Created at {{ include('generic/datetime.badge.html.twig', {datetime: snip.activeVersion.id.dateTime}) }}
</p>
</div>
</div>
{% endblock %}
{% block css %}

View File

@ -1 +1,3 @@
<span class="badge {% if user == app.user %}bg-success{% else %}bg-secondary{% endif %}">{{ user }}</span>
<span class="badge {% if user == app.user %}bg-success{% else %}bg-secondary{% endif %}">
<i class="fa fa-user"></i> {{ user }}
</span>

View File

@ -1,18 +1,18 @@
{% extends 'base/one.column.html.twig' %}
{% extends 'snip/base.html.twig' %}
{% set title = 'Snip ' ~ snip %}
{% set title %}{{ snip }} - Versions{% endset %}
{% set active = 'versions' %}
{% block body %}
<a href="{{ path('snip_single', {snip: snip.id}) }}" class="btn btn-primary">
<i class="fa fa-arrow-left"></i> Back
</a>
{% block buttons %}
<a href="{{ path('version_set', {version: snip.latestVersion.id, snip: snip.id}) }}" class="btn btn-warning">
<i class="fa fa-refresh"></i> Latest
</a>
<a href="{{ path('content_compare', {to: snip.activeVersion.id}) }}" class="btn btn-info">
<i class="fa fa-left-right"></i> Compare
</a>
<br><br>
{% endblock %}
{% block cardbody %}
<div class="list-group">
{% for version in snip.snipContents|reverse %}
<a class="list-group-item {% if version.id == snip.activeVersion.id %}list-group-item-success{% endif %} d-flex justify-content-between"