UI: Fixed admin footer with save button, version, and website globe

This commit is contained in:
2026-06-12 23:59:18 +02:00
parent e13cb05d48
commit 5bf7c19ac3
+44 -11
View File
@@ -27,6 +27,7 @@ import {
faImages, faImages,
faFloppyDisk, faFloppyDisk,
faFileLines, faFileLines,
faGlobe,
} from '@fortawesome/free-solid-svg-icons'; } from '@fortawesome/free-solid-svg-icons';
import { THEME } from '../styles/theme'; import { THEME } from '../styles/theme';
import { logger } from '../services/logger'; import { logger } from '../services/logger';
@@ -649,8 +650,15 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
/> />
</View> </View>
</View> </View>
</ScrollView>
<TouchableOpacity style={styles.saveBtn} onPress={handleSave} activeOpacity={0.8}> {/* Fixed Footer */}
<View style={styles.fixedFooter}>
<View style={styles.footerSideLeft}>
<Text style={styles.versionText}>v{appConfig.expo.version}</Text>
</View>
<TouchableOpacity style={styles.saveBtnFixed} onPress={handleSave} activeOpacity={0.8}>
<LinearGradient <LinearGradient
colors={THEME.gradient.primary} colors={THEME.gradient.primary}
start={{ x: 0, y: 0.5 }} start={{ x: 0, y: 0.5 }}
@@ -662,13 +670,12 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
</LinearGradient> </LinearGradient>
</TouchableOpacity> </TouchableOpacity>
<View style={{ alignItems: 'center', marginTop: 20, marginBottom: 40 }}> <View style={styles.footerSideRight}>
<Text style={{ color: '#555', fontSize: 14, marginBottom: 10 }}>App Version {appConfig.expo.version}</Text> <TouchableOpacity onPress={() => Linking.openURL('https://schnappix.orfel.de')} style={styles.globeLink}>
<TouchableOpacity onPress={() => Linking.openURL('https://schnappix.orfel.de')}> <FontAwesomeIcon icon={faGlobe} size={24} color={THEME.colors.accent} />
<Text style={{ color: THEME.colors.accent, fontSize: 16, textDecorationLine: 'underline' }}>schnappix.orfel.de</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScrollView> </View>
{/* Log Modal */} {/* Log Modal */}
<Modal visible={logs !== null} transparent animationType="slide"> <Modal visible={logs !== null} transparent animationType="slide">
@@ -908,14 +915,40 @@ const styles = StyleSheet.create({
fontWeight: '600', fontWeight: '600',
color: THEME.colors.text, color: THEME.colors.text,
}, },
saveBtn: { fixedFooter: {
width: '100%', flexDirection: 'row',
maxWidth: 680, alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: THEME.spacing.xl,
paddingVertical: THEME.spacing.md,
backgroundColor: THEME.colors.surface,
borderTopWidth: 1,
borderTopColor: THEME.colors.border,
},
footerSideLeft: {
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
},
footerSideRight: {
flex: 1,
alignItems: 'flex-end',
justifyContent: 'center',
},
versionText: {
color: '#555',
fontSize: 16,
fontWeight: 'bold',
},
globeLink: {
padding: THEME.spacing.xs,
},
saveBtnFixed: {
flex: 2,
maxWidth: 400,
height: 52, height: 52,
overflow: 'hidden', overflow: 'hidden',
borderRadius: THEME.borderRadius.md, borderRadius: THEME.borderRadius.md,
marginTop: THEME.spacing.sm,
marginBottom: THEME.spacing.xl,
shadowColor: THEME.colors.gradientGlow, shadowColor: THEME.colors.gradientGlow,
shadowOffset: { width: 0, height: 4 }, shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.5, shadowOpacity: 0.5,