Skip to content

Commit 612d756

Browse files
BeaMarton13BeaMarton13
committed
add: download button - wip
1 parent 4be130d commit 612d756

File tree

3 files changed

+173
-69
lines changed

3 files changed

+173
-69
lines changed

‎doc/source/_static/custom.css‎

Lines changed: 58 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -10,94 +10,85 @@
1010
}
1111

1212
/* Custom CSS for colored cards */
13-
14-
/* Base card styling (adjust padding, font sizes if needed) */
13+
/* Base card styling for better visual appearance */
1514
.sd-card {
16-
border: none !important; /* Remove default border */
17-
border-radius: 8px !important; /* Slightly rounded corners */
18-
text-align: center; /* Center content within the card */
19-
display: flex;
20-
flex-direction: column;
21-
justify-content: center; /* Vertically center content */
22-
align-items: center; /* Horizontally center content */
23-
padding: 1.5em; /* Padding inside the card */
24-
min-height: 140px; /* Ensure a consistent minimum height for cards */
25-
color: white; /* Default text color for all custom cards */
26-
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smooth hover effect */
15+
border: none !important;
16+
border-radius: 8px !important;
2717
position: relative;
18+
padding: 1em; /* Adjust padding as needed */
19+
color: white;
20+
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
2821
}
2922

3023
/* Hover effect */
3124
.sd-card:hover {
32-
transform: translateY(-5px); /* Lift card slightly */
33-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
34-
cursor: pointer;
35-
position: relative;
25+
transform: translateY(-3px); /* Slightly lift card */
26+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
3627
}
3728

38-
/* Card titles */
39-
.sd-card-title {
40-
font-size: 1.2em; /* Larger title */
29+
/* Card titles inside the body */
30+
.sd-card-body h3, .sd-card-body strong {
31+
font-size: 1.2em;
4132
font-weight: bold;
42-
margin-bottom: 0.5em; /* Space between title and icon */
43-
color: white !important; /* Ensure title color is white */
33+
margin-bottom: 0.5em;
34+
color: white !important;
35+
}
36+
37+
/* Ensure the main content block has flexible spacing */
38+
.sd-card-body {
39+
display: flex;
40+
flex-direction: column;
41+
justify-content: space-between;
42+
height: 100%;
43+
}
44+
45+
/* Download button container inside the card */
46+
.sd-card-body .download-container {
47+
position: relative;
48+
z-index: 10; /* A high number to make sure it's on top */
49+
margin-top: auto; /* Push to the bottom */
50+
text-align: right;
51+
}
52+
53+
/* The actual button inside the container */
54+
.sd-card-body .download-button {
55+
background-color: #f8f9fa;
56+
color: #212529;
57+
border: 1px solid #ced4da;
58+
padding: 10px 20px;
59+
border-radius: 5px;
60+
cursor: pointer;
61+
}
62+
63+
.download-link {
64+
text-decoration: none !important;
4465
}
4566

46-
/* Icon styling (for Font Awesome icons within cards) */
47-
.sd-card .fa-solid,
48-
.sd-card .fa-regular,
49-
.sd-card .fa-brands {
50-
font-size: 3.5em; /* Large icon size */
51-
margin-bottom: 0.3em; /* Space between icon and text */
52-
opacity: 0.8; /* Slightly less opaque than text */
53-
color: white !important; /* Ensure icon color is white */
67+
.download-button {
68+
padding: 8px 16px;
69+
background-color: #2980b9;
70+
color: white;
71+
border: none;
72+
border-radius: 4px;
73+
cursor: pointer;
74+
font-size: 14px;
75+
transition: background-color 0.3s;
76+
}
77+
78+
.download-button:hover {
79+
background-color: #3498db;
5480
}
5581

82+
/* Colored cards (your colors are good) */
5683
.card-red-orange { background-color: #FF6633; }
5784
.card-deep-orange { background-color: #FF8C40; }
5885
.card-yellow-orange { background-color: #FFA500; }
59-
6086
.card-light-green { background-color: #7ED957; }
6187
.card-medium-green { background-color: #70B341; }
6288
.card-dark-green { background-color: #4CAF50; }
63-
6489
.card-light-blue { background-color: #409ED8; }
6590
.card-medium-blue { background-color: #007BFF; }
6691
.card-deep-blue { background-color: #0056b3; }
67-
6892
.card-light-purple { background-color: #BF40BF; }
6993
.card-medium-purple { background-color: #800080; }
70-
.card-deep-purple { background-color: #4B0082; }
71-
72-
/* Optional: Make links within cards cover the whole card */
73-
.sd-card a {
74-
position: absolute;
75-
top: 0;
76-
left: 0;
77-
width: 100%;
78-
height: 100%;
79-
text-decoration: none; /* Remove underline */
80-
z-index: 1; /* Ensure link is clickable */
81-
}
82-
83-
.sd-card a:hover {
84-
text-decoration: none; /* No underline on hover */
85-
}
86-
87-
/* Ensure text is on top of the link layer */
88-
.sd-card .sd-card-body, .sd-card .sd-card-header, .sd-card .sd-card-footer {
89-
position: relative;
90-
z-index: 2;
91-
}
92-
93-
/* Hide default card header/footer if not used */
94-
.sd-card-header, .sd-card-footer {
95-
display: none;
96-
}
97-
98-
/* Ensure content doesn't block clickable area */
99-
.sd-card-body {
100-
position: relative;
101-
z-index: 1;
102-
pointer-events: none;
103-
}
94+
.card-deep-purple { background-color: #4B0082; }

‎doc/source/community_detection_guide.rst‎

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,18 @@ This documentation provides an overview of the notebooks available in the commun
2727
:link-type: doc
2828
:class-card: sd-card-hover card-red-orange
2929
:shadow: sm
30-
30+
3131
**Overview:** This notebook is a quick start guide to community detection in igraph. It covers the initial workflow for detecting communities in networks. (If you look for a more practical learning experience, we recommend starting with this notebook.)
32+
33+
.. raw:: html
34+
35+
<div class="download-container">
36+
<a href="community_detection_guide/notebooks/initial_workflow.ipynb" download>
37+
<button type="button" class="download-button">
38+
<i class="fa-solid fa-download"></i> Download Notebook
39+
</button>
40+
</a>
41+
</div>
3242

3343
.. grid-item-card:: Community Detection Algorithms
3444
:link: community_detection_guide/notebooks/community_detection_algorithms
@@ -38,13 +48,33 @@ This documentation provides an overview of the notebooks available in the commun
3848

3949
**Overview:** This notebook covers various community detection algorithms available in igraph. It provides a detailed explanation of these algorithms and when to use them.
4050

51+
.. raw:: html
52+
53+
<div class="download-container">
54+
<a href="community_detection_guide/notebooks/community_detection_algorithms.ipynb" download>
55+
<button type="button" class="download-button">
56+
<i class="fa-solid fa-download"></i> Download Notebook
57+
</button>
58+
</a>
59+
</div>
60+
4161
.. grid-item-card:: Test Significance of Community
4262
:link: community_detection_guide/notebooks/test_significance_of_community
4363
:link-type: doc
4464
:class-card: sd-card-hover card-yellow-orange
4565
:shadow: sm
4666

4767
**Overview:** This notebook provides methods to test the significance of detected communities.
68+
69+
.. raw:: html
70+
71+
<div class="download-container">
72+
<a href="community_detection_guide/notebooks/test_significance_of_community.ipynb" download>
73+
<button type="button" class="download-button">
74+
<i class="fa-solid fa-download"></i> Download Notebook
75+
</button>
76+
</a>
77+
</div>
4878

4979
.. grid-item-card:: Generating and Visualizing Clusters
5080
:link: community_detection_guide/notebooks/generating_and_visualizing_clusters
@@ -53,6 +83,16 @@ This documentation provides an overview of the notebooks available in the commun
5383
:shadow: sm
5484

5585
**Overview:** This notebook provides various methods for generating and visualizing clusters in networks. It includes techniques for visualizing community structures.
86+
87+
.. raw:: html
88+
89+
<div class="download-container">
90+
<a href="community_detection_guide/notebooks/generating_and_visualizing_clusters.ipynb" download>
91+
<button type="button" class="download-button">
92+
<i class="fa-solid fa-download"></i> Download Notebook
93+
</button>
94+
</a>
95+
</div>
5696

5797
.. grid-item-card:: Hierarchical Clustering
5898
:link: community_detection_guide/notebooks/hierarchical_clustering
@@ -62,13 +102,33 @@ This documentation provides an overview of the notebooks available in the commun
62102

63103
**Overview:** This notebook describes hierarchical clustering. It explains how to perform hierarchical clustering on networks and visualize the results.
64104

105+
.. raw:: html
106+
107+
<div class="download-container">
108+
<a href="community_detection_guide/notebooks/hierarchical_clustering.ipynb" download>
109+
<button type="button" class="download-button">
110+
<i class="fa-solid fa-download"></i> Download Notebook
111+
</button>
112+
</a>
113+
</div>
114+
65115
.. grid-item-card:: Modularity
66116
:link: community_detection_guide/notebooks/modularity
67117
:link-type: doc
68118
:class-card: sd-card-hover card-light-green
69119
:shadow: sm
70120

71121
**Overview:** This notebook introduces the concept of modularity in community detection.
122+
123+
.. raw:: html
124+
125+
<div class="download-container">
126+
<a href="community_detection_guide/notebooks/modularity.ipynb" download>
127+
<button type="button" class="download-button">
128+
<i class="fa-solid fa-download"></i> Download Notebook
129+
</button>
130+
</a>
131+
</div>
72132

73133
.. grid-item-card:: Interactive Resolution on Sierpinski
74134
:link: community_detection_guide/notebooks/interactive_resolution_on_sierpinski
@@ -77,6 +137,16 @@ This documentation provides an overview of the notebooks available in the commun
77137
:shadow: sm
78138

79139
**Overview:** This notebook introduces the concept of resolution parameter on the Sierpinski triangle.
140+
141+
.. raw:: html
142+
143+
<div class="download-container">
144+
<a href="community_detection_guide/notebooks/interactive_resolution_on_sierpinski.ipynb" download>
145+
<button type="button" class="download-button">
146+
<i class="fa-solid fa-download"></i> Download Notebook
147+
</button>
148+
</a>
149+
</div>
80150

81151
.. grid-item-card:: Consensus Clustering
82152
:link: community_detection_guide/notebooks/consensus_clustering
@@ -85,6 +155,16 @@ This documentation provides an overview of the notebooks available in the commun
85155
:shadow: sm
86156

87157
**Overview:** This notebook introduces the method of consensus clustering by combining multiple clustering results.
158+
159+
.. raw:: html
160+
161+
<div class="download-container">
162+
<a href="community_detection_guide/notebooks/consensus_clustering.ipynb" download>
163+
<button type="button" class="download-button">
164+
<i class="fa-solid fa-download"></i> Download Notebook
165+
</button>
166+
</a>
167+
</div>
88168

89169
.. grid-item-card:: Membership Vector
90170
:link: community_detection_guide/notebooks/membership_vector
@@ -93,6 +173,16 @@ This documentation provides an overview of the notebooks available in the commun
93173
:shadow: sm
94174

95175
**Overview:** This notebook introduces membership vectors in igraph.
176+
177+
.. raw:: html
178+
179+
<div class="download-container">
180+
<a href="community_detection_guide/notebooks/membership_vector.ipynb" download>
181+
<button type="button" class="download-button">
182+
<i class="fa-solid fa-download"></i> Download Notebook
183+
</button>
184+
</a>
185+
</div>
96186

97187
.. grid-item-card:: Vertex Clustering Object
98188
:link: community_detection_guide/notebooks/working_with_clusterings
@@ -101,6 +191,16 @@ This documentation provides an overview of the notebooks available in the commun
101191
:shadow: sm
102192

103193
**Overview:** This notebook describes how to work with clusterings in igraph.
194+
195+
.. raw:: html
196+
197+
<div class="download-container">
198+
<a href="community_detection_guide/notebooks/working_with_clusterings.ipynb" download>
199+
<button type="button" class="download-button">
200+
<i class="fa-solid fa-download"></i> Download Notebook
201+
</button>
202+
</a>
203+
</div>
104204

105205
.. grid-item-card:: Helper Functions
106206
:link: community_detection_guide/notebooks/functions
@@ -109,6 +209,16 @@ This documentation provides an overview of the notebooks available in the commun
109209
:shadow: sm
110210

111211
**Overview:** This notebook introduces all the helper functions used in the community detection guide. It provides a collection of utility functions for community detection tasks.
212+
213+
.. raw:: html
214+
215+
<div class="download-container">
216+
<a href="community_detection_guide/notebooks/functions.ipynb" download>
217+
<button type="button" class="download-button">
218+
<i class="fa-solid fa-download"></i> Download Notebook
219+
</button>
220+
</a>
221+
</div>
112222

113223
Indices and tables
114224
==================

‎doc/source/conf.py‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,10 @@ def get_igraph_version():
142142
# https://github.com/twisted/pydoctor/blob/master/docs/source/conf.py
143143
html_theme = "sphinx_rtd_theme"
144144
html_static_path = ["_static"]
145-
html_css_files = ["custom.css"]
145+
html_css_files = [
146+
"custom.css",
147+
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
148+
]
146149

147150
nbsphinx_execute = 'never'
148151
nbsphinx_allow_errors = True

0 commit comments

Comments
 (0)